【Angular】组件之间的交互(参照 Angular 官网总结)

1. 父组件中使用子组件并绑定输入属性

   <div nz-row>
       <div nz-col [nzLg] "{span :24}">
           <download-pdf-button
               [elementld]="'riskReport'"
               [parentName]="'risk assessment'">
           <download-pdf-button>
       </div>
   </div>
   

2. 子组件使用 @Input 获取父组件给子组件绑定的属性值

    export class DownloadPDFButtonComponent implements OnInit{
          @Input() elementld: string = "";
       @Input() parentName: string = "";
   
       constructor(
           private NzMessageService,
           private element: ElementRef
       ){}
   
       ngOnInit(): void {
           console. log( "elementld", this.elementld) ;
           console. log( "parentNarpe"  this.parentName);
      }
   

3. 结果：constructor 中获取不到 input 属性，最先获取的生命周期是在 onInit

   

1. @Input() 使用一个输入属性的 setter ,以拦截父组件中值的变化并采取行动

   export class DownloadPDFButtonComponent implements OnInit{
   @Input() elementld: string="";
   @Input()
   get parentName() {return this ._parentName}
   set parentName(parentName: string) {
       this._parentName = parentName ? parentName + "parent" :  'risk-parent' 
   }
   
   _parentName = "";
   

   

通过 ngOnChanges() 来截听输入属性值

angular.cn/guide/compo…

1. 子组件绑定 click 事件

   <button (click)="downloadPDF('hello')" nz-button [nz-type]="'primary'">
       <i nz-icon nzType = "downLoad" nzTheme="outline"></i>下载 PDF
   </button>
   

2. 引入 EventEmitter 和 output

   

3. 定义 output 变量并发送数据到父组件

   

4. 父组件绑定子组件output事件变量

   

   

   

父组件与子组件通过本地变量 互动

angular.cn/guide/compo…

1. 父组件中 import 子组件和* viewChild*

   

2. 声明子组件

   

3. 调用子组件的方法