如何在Angular 5中设置child（或nth child）组件的child的属性

Question

How can I set property of child of child(or nth level child) component from parent in Angular 5 without creating intermediate variables. For example lets say I've child component as shown below.

@Component({
  selector: 'app-child11',
  template: '<p><br/> child11 works!<br/> Name is {{name}}</p>',
  styleUrls: ['./child11.component.css']
})
export class Child11Component implements OnInit {

  @Input() name: string;
  constructor() {}
  ngOnInit() {}
}

Let us say I've parent of child11 is child1 as shown below

@Component({
  selector: 'app-child1',
  template: '<p>child1 works!<app-child11 name="Karthik"></app-child11></p>',
  styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
  constructor() {}

  ngOnInit() {}
}

And the parent component as shown belown

@Component({
  selector: 'app-root',
  template: '<div><app-child1></app-child1></div>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Now how can I modify template of app-root such that I can directly set the name value of child11 in app-root, without introducing variable in Child1 that propagates to AppComponent?

Answer 1

If I wanted to do this , I would prefer to use binded component input instead of simple input.

The code that I prepared is.

app.component.ts

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

@Component({
  selector: 'app-child11',
  template: '<p><br/> child11 works!<br/> Name is {{name}}</p>',
  styleUrls: []
})
export class Child11Component implements OnInit {

  @Input() name: string;
  constructor() { }
  ngOnInit() { }
}

@Component({
  selector: 'app-child1',
  template: '<p>child1 works!<app-child11 [name]="name"></app-child11></p>',
  styleUrls: []
})
export class Child1Component implements OnInit {
  constructor() { }
  @Input() name: string;
  ngOnInit() { }
}

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  name: string;
}

app.component.html

<p>child1 works!
    <app-child11 [name]="name"></app-child11>
</p>
<br>
<input type="text" [(ngModel)]="name"/>

Now whatever you write inside input tag in app-root component will be reach to app-child11 and finally it will print there.

I hope it can help you.

Answer 2

if you dont want creating intermediat variables you can create Service for example ChildService . Service Guide . Create child$: Observable<any[]> or child$$: Subject<any[]> and subscribe on Child11Component :

this.child$
    .filter(child => child.name === this.name)
    .subscribe(child => this.child = child);

Your this.child variable has necessary child.