Angular-06:组件通讯

① 向组件内部传递数据

1. @input() 装饰器
2. 语法1：@input() 变量名:类型；
3. 语法2：@input(“变量名”) 别名:类型；

例：在子组件的模板标签上，使用[ ] 加上属性名，将父组件的属性进行一个传递。

• sonName是传递给子组件的属性，当前值为：王二小

<app-son [sonName]="'王二小'">app-son>

• 在子组件app-son中接收该值

// 子组件

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

@Component({
  selector: 'app-son',
  templateUrl: './son.component.html',
  styleUrls: ['./son.component.css']
})
export class SonComponent implements OnInit{
  @Input() sonName: string = '';  //等同于   @Input('sonName') sonName: string = ''; 
}

---

② 向组件外部传递数据

1. @output() 装饰器
2. @output() 变量名 = new EventEmitter();
3. 事件发射器，也叫做自定义事件。 在子组件的模板标签上，使用( )加上属性名，在父组件中使用方法接收该参数

例：在子组件中通过点击按钮将数据传递到父组件

• 在子组件模板中定义一个按钮，事件名为：sendMessage()

<button (click)="sendMessage()">点击发送消息button>

• 在子组件类中定义该方法并传递出去

// 子组件类

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

@Component({
  selector: 'app-son',
  templateUrl: './son.component.html',
  styleUrls: ['./son.component.css']
})
export class SonComponent implements OnInit{
  @Output() sendMessageEmit = new EventEmitter();

  sendMessage() {
    this.sendMessageEmit.emit('子组件发出的消息');
  }
}

• 在父组件中的子组件标签上定义接收方法
• 点击子组件的按钮时，会在父组件中打印结果

<app-son (sendMessageEmit)="getSendMessage($event)">app-son>

// 父组件类

  getSendMessage(event: string) {
    console.log("父组件接收的消息是：", event);   // 父组件接收的消息是：子组件发出的消息
  }

---