angular - 我如何将数据从我的父组件传递到 Angular 中的子组件？

Question

这是我的父组件，我想将不同标题(这里是消息)之类的数据传递给它的每个子组件。我该怎么做？？

家长:

<div class="container">
    <div class="row">
        <div>
            <h1 class="title">Whatever</h1>
            <p class="subtitle">Nothing.</p>
        </div>
        <div class="col-sm-12">
            <div class="cardContainer">
                <app-cards [message]=message></app-cards>
                <app-cards [message]=message></app-cards>
                <app-cards [message]=message></app-cards>
                <app-cards [message]=message></app-cards>               
            </div>
        </div>
    </div>
</div>

child :

<div class="card">
    <div class="bg-text">
        <div class="title">{{message}}</div>
        <h6>Obviously, you are important</h6>
        <div class="cardButtons">
            <a href="" class="link link1">Health</a>
            <a href="" class="link link2">Travel</a>
            <a href="" class="link link3">Accident</a>
        </div>
    </div>
</div>

Answer 1

可能以下解决方案会对您有所帮助:)

父模板:

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

父组件:

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

  messageFromParent : string;  
 
  constructor() { }

  ngOnInit() {   

    this.messageFromParent = "Hellow world!";
    
  }    
}

子模板:

<div>
    {{message}}
</div>

子组件:

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

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

  ngOnInit() {   
    
  }    
}