如何在 Angular 中将数据从父级传递给子级

Question

当我尝试将数据从父组件传递到子组件时。我在控制台中收到一条未定义的消息。 这里我的消息只是一个字符串。

1. child.component.ts - >[ upload-doc.component.ts ]

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

@Component({
  selector: 'app-upload-doc',
  template: `
      Say {{ message}}
  `,
  templateUrl: './upload-doc.component.html',
  styleUrls: ['./upload-doc.component.css']
})
export class UploadDocComponent implements OnInit {

   

   @Input() message: string;
  constructor() { }

  ngOnInit(): void {
    console.log("Child Component " + this.message); // printing on console
    
  }

}

2. parent.component.ts - > [注册页面.component.ts]

@Component({
  
  selector: 'app-register-page',
  
  templateUrl: './register-page.component.html',
   template: `<app-upload-doc [message]="message"> </app-upload-doc>`,
  styleUrls: ['./register-page.component.css']
})

export class RegisterPageComponent implements OnInit {

  
 constructor() { }
  message = "message from parent"

 ngOnInit(){ }

}

它给我的输出为“子组件未定义”。如何摆脱这个未定义的东西。

Answer 1

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  message: string = "Hey there!";

  constructor() { }
}

（父级）app.component.html

<app-child [message]="message"></app-child>

child.component.ts

---

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() message:string;

  constructor() { }

  ngOnInit() {
    console.log(this.message)
  }
}

child.component.html

<p>
    {{ message }}
</p>

Answer 2

@ViewChild

在父组件和子组件之间或任何组件之间进行通信。

步骤：

创建一个处理程序来访问父组件中的子组件。

// Parent.component.ts

export class ParentComponent implements OnInit {

  @ViewChild('attendance') _attendance: AttendanceCardComponent

  ngAfterViewInit(): void {
     this._attendance.passSomeMessage(this.someData); // this is a function inside the **child component (here, AttendanceCardComponent)
  }
}

在Parent.component.html中添加用于检测子组件的标记

注意：标记必须与

@ViewChild() *选择器中给出的名称相同。```

<section>
      <h6><b>My Activity</b></h6>
      <app-attendance-card #attendance></app-attendance-card>
</section>

就是这样！

。一切顺利，可以出发了。

Answer 3

Answer 4

生命周期钩子

。在 ngOnInit() 点，您还没有输入值。相反，您应该在收到输入后使用

ngAfterContentInit

查看内容。所以你唯一需要的改变是

  ngAfterContentInit(): void {
    console.log("Child Component " + this.message); // printing on console    
  }