angular 基本命令

素颜马尾好姑娘i 2023-05-30 11:00 13阅读 0赞

ng new my-project  => 项目名

ng serve 开启服务，之后可以http://localhost:4200 访问

\[attribute\] 为属性绑定

(click) 为事件绑定

父子组件通信：

和vue一样，都是用发射机制

子组件中定义输入和输出

@Input attr

@Output nofity

@Output show

定义product-alert作为子组件：

product-alert.component.html:

<div *ngIf="product.price > 700">
      <button (click)="onNotifyByMe()">Notify by children</button>
      <div>
        
        <button (click)="notify.emit()">Notify by children</button>
        <button (click)="show.emit()">Show by children</button>
      </div>
    </div>

product-alert.component.ts:

import { Component, OnInit } from '@angular/core';
    import { Input, Output, EventEmitter } from '@angular/core';
    
    @Component({
      selector: 'app-product-alert',
      templateUrl: './product-alert.component.html',
      styleUrls: ['./product-alert.component.css']
    })
    export class ProductAlertComponent implements OnInit {
    
      // input 的输入绑定，外部传的是[]做属性绑定
      @Input() product;
      // output 往外放射，触发父组件的事件
      @Output() notify = new EventEmitter();
      @Output() show = new EventEmitter();
    
      constructor() { }
    
      ngOnInit() {
      }
    
      onNotifyByMe() {
        window.alert("notify by myself");
      }
    }

可以看到在ts文件中定义了一个输入 product 和两个输出 notify和show

同时在html中通过两个按键绑定了这两个输出的触发事件，整个流程就好像子组件给父组件打了一个电话，告诉他父组件该干什么了，父组件接收到子组件的通知后，就开始做相对应绑定的事情

父组件中的定义：

product-list.component.html

<h2>Product</h2>
    
    
    <div *ngFor="let product of productList; index as productId">
    
      
      
      
      <app-product-alert [product]="product" (notify)="onNotify()" (show)="onShow()">
      </app-product-alert>
    
      <br/>
      <br/>
    </div>

product-list.component.ts

import { products } from '../../../assets/products';
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-product-list',
      templateUrl: './product-list.component.html',
      styleUrls: ['./product-list.component.css']
    })
    export class ProductListComponent implements OnInit {
    
      productList = products;
    
      constructor() { }
    
      ngOnInit() {
      }
    
    
      onNotify() {
        window.alert("parent notify");
      }
    
      onShow() {
        window.alert("parent show");
      }
    
    }

可以看到父组件中，用\[product\]向子组件中传递了product信息，同时用(notify)="onNotify()"和(show)="onShow()"来获取到子组件发射出来的事件，并绑定到自己的事件中去。