在Angular 5中将数据从父级传递给第n个孩子

Question

让我们假设我有一个父组件，该组件与其子组件进行交互，例如：

如果是这种情况，我可以使用以下语法将一些数据传递给孩子：

  

parent.component.ts

// imports..      
selector: "app-parent",
templateURL: "./parent.component.html",
// ...
export class ParentComponent{
public statement= "I am your father"!;
}

  

parent.component.html

<div>
 <h1>
   My name is Darth Vader
 </h1>
</div>    
<app-child [luke] = "statement"></app-child> // child selector!

  

child.component.ts

// imports..      
selector: "app-child",
templateURL: `<h2>{{"Luke, " + luke}}</h2>`
// ...
export class TestComponent{
@Input() public luke;
}

结果应为：

  

卢克，我是你的父亲！

到目前为止没有什么特别的。

现在，如果我的子组件包含另一个子并因此充当其父，该怎么办？

  

child.component.html

<app-secondChild></app-secondChild> // selector of second.child.component.ts!

  

second.child.component.html

<app-thirdChild></app-thirdChild> // selector of third.child.component.ts!

  

third.child.component.html

<app-fourthChild></app-fourthChild> // selector of fourth.child.component.ts!

基本上，我想将数据从父级传递到最后一个子级，以激活一些HTML代码。

我希望这不要太复杂了。

Answer 1

您可以使用3种方式将值从父级转移到子级

1. 在父.html文件中使用输入

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

   和child.ts文件

   export class ChildComponent implements OnInit{
      @Input() user: SocialUser;
   }
   

2. 使用简单存储，storage.service.ts

   public user: String = '';
   

   现在将此项服务导入module.ts文件，并在parent.ts中导入存储服务

   constructor(public storageService: StorageService){}
   ngOnInit(){this.storageService.user = 'user_value';}
   

   在child.ts文件中

   constructor(public storageService: StorageService){}
   ngOnInit(){console.log(this.storageService.user);}
   

3. 在storage.service.ts中使用Observable

   public user: Subject<any> = new BehaviorSubject<any>(null);
   

   现在将此项服务导入module.ts文件，并在parent.ts中导入存储服务

   constructor(public storageService: StorageService){}
   ngOnInit(){this.storageService.user.next('user_value')}
   

   在child.ts文件中

   constructor(public storageService: StorageService){}
   
   ngOnInit(){
       this.storageService.user.subscribe(user=> {if(user) console.log(user)});
   }
   

此解决方案可以解决您的问题。

Answer 2

您可以使用输入参数将数据从父项传递到子项，直到最后一个子项获得为止。如果中间的组件不需要此数据，则可以采取其他方法。我有两种选择：

1. 您可以将服务类与具有必须共享的数据的属性一起使用。

2. 您可以使用与共享数据存储一起使用的其他模式，您可能想看看Redux和ngrx存储：https://github.com/ngrx/store