Question

我试图将一个值从父组件（MainComponent）传递给子组件（ChildComponent），但子组件未在父模板中声明，而是从父组件中加载到ngContent内＃＆＃ 39; s父组件（AppComponent）。

@Component({
  selector: 'my-app',
  template: '<div>' + 
  '<main-component><child-component [big]="big"></child-component></main-    component>' + 
  '<main-component><childuo-component [small]="big"></childuo-component></main-component>' + 
  '</div>'
})
export class AppComponent { }

@Component({
  selector: 'main-component',
  template: '<div><div>{{big | lowercase}}</div><div><ng-content></ng-content></div>'
})
export class MainComponent { 
  big: string = "BIG";
}

@Component({
  selector: 'child-component',
  template: '<div>Finally: {{big}}</div>'
})
export class ChildComponent { 
  @Input() big: string;
}

@Component({
  selector: 'childuo-component',
  template: '<div>Second?: {{small}}</div>'
})
export class ChildDuoComponent { 
  @Input() small: string;
}

我创建了一个用于显示我的问题的plunker：Demo。

我更新了我的问题以包含更多详细信息，我希望允许MainComponent保存不同的子组件并在顶级组件（AppComponent）中声明它。

Answer 1

您没有将big作为AppComponent中定义的变量，因此您没有看到该值。

请注意"'big'"周围的单引号。

 @Component({
  selector: 'my-app',
  template: `<main-component>
     <child-component [big]="'big'"></child-component>
     <child-component [big]="someVar"></child-component>
  </main-component>`
 })
 export class AppComponent {
   someVar = 'someVar';
 }

以下是Plunker

希望这会有所帮助!!

将值传递给ngContent中的Component

1 个答案: