Как передать свойство компонента на подкомпонент?

Question

У меня есть два вложенных компонента.

Компонент main находится здесь:

@Component({
  selector: 'main',
  template: `<h1>Hello {{cat}}!</h1>`
})
export class MainComponent implements OnInit {
  cat: string;

  ngOnInit() {

  }
}

Главный компонент имеет имена свойств cat.Я хочу передать его субкомпоненту.

@Component({
  selector: 'sub',
  template: `<ng-content></ng-content>`
})
export class SubComponent implements OnInit {
  @Input() cat: string;

  ngOnInit() {
     console.log(this.cat) // This writes undefined in console.
  }
}

И я использовал его в app.component.html следующим образом:

<main>
  <sub [cat]="cat"></sub>
</main>

Но свойство cat в компоненте main непередать sub компонент.

Рабочий код здесь.

Answer 1

Вы случайно использовали неправильные шаблоны для компонента main и sub, ваш компонент main должен иметь шаблон <ng-content></ng-content>, а компонент sub - шаблон <h1>Hello {{cat}}!</h1>.

Потому что если у вас нет узла ng-content внутри шаблона компонентов main, компонент sub никогда не будет проецироваться / инициализироваться.

Также, если вы используете [cat]="cat", он будет искатьсвойство cat в вашем app.component, поскольку вы используете его в контексте компонента app.component.

Проекция содержимого не меняет контекст привязок вашего свойства.

Answer 2

Вы также можете определить cat непосредственно в вашем компоненте.

@Component({
  selector: 'main',
  template: `<sub [cat]="cat"></sub>`
})
export class MainComponent implements OnInit {
  cat: string = 'cat';

  ngOnInit() {
     console.log(this.cat) // Will output 'cat'
  }
}

Ваш подкомпонент правильный и выдает cat:

@Component({
  selector: 'sub',
  template: `<h1>Hello {{cat}}!</h1>`
})
export class SubComponent implements OnInit {
  @Input() cat: string;

  ngOnInit() {
     console.log(this.cat) // Will output 'cat'
  }
}

Ваш шаблон app.component.html должен содержать только main

<main></main>

Answer 3

вам нужно передать значение как

<sub [cat]="cat"></sub>

или вам нужно назначить переменную cat в вашем файле main.ts, например

  ngOnInit() {
    this.cat = 'cat';
  }