发表于: 2021-05-23 21:05:13

1 1975


今天完成的事情:JS知识巩固;angular尝试写样式


明天计划的事情:写任务样式


收获:

初始化组件的构建应用:

<app-root> - 第一个加载的组件,并且是其他组件的容器(根)。
<app-top-bar> - 商店名称和结帐按钮。
<app-product-list> - 产品列表。
<app-product-alerts> - 包含应用中各种通知的组件

*ngFor:

<h2>Products</h2>

<div *ngFor="let product of products">

</div>

使用 *ngFor,会把这个 <div> 针对列表中的每个产品进行复写。


组件的使用:

新建组件,

命令框中  ng g c name    来新建组件(简写的方式),

执行此命令后,会自动生成一个组件的文件

下面是新生成的组件 SimpleFormComponent 组件的简单使用:

simple-form.component.ts   - 新建的组件模块

使用组件:

根组件的 AppComponent 模块中

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `    
        <h3>{{title}}</h3>    
        <div>      
            <app-simple-form></app-simple-form>    

        </div>  

    ` })


export class AppComponent {
    title = 'Hello, Angular';

}



新建子组件的 SimpleFormComponent 模块中:

import { Component, OnInit } from '@angular/core';


@Component({

    selector: 'app-simple-form',
    template: `    

        <p>

           simple-form Works!

        </p>

     `,

    styles: []
})
export class SimpleFormComponent implements OnInit {
    constructor() { }
    ngOnInit() { }
}




返回列表 返回列表
评论

    分享到