如何将子组件属性显示到传递的ng-template中

时间:2019-05-31 09:57:21

标签: angular ng-template

我有一个带有默认html模板的子组件,并且我想将此组件与其他html模板一起使用(从父级传递)。我使用ngTemplateOutlet选择模板,但是使用自定义模板时不显示子属性。

@Component({
  selector: 'sbase-tags',
  template: '
    <ng-container *ngTemplateOutlet="customTemplate?customTemplate : defaultTemplate">
    </ng-container>

    <ng-template #defaultTemplate>
      <ul>
        <li *ngFor='let item of inputList'>
          {{item.name}}
        </li>
      </ul>
    </ng-template>`
})
export class TagsComponent implements OnInit {
  @Input() inputList: any[];
  @Input() customTemplate: TemplateRef<any>;

  constructor() {
  }

  ngOnInit(): void {
  }
}


Parent component:

@Component({
  selector: 'app-root',
  template: ` 
<sbase-tags 
    [inputList]="parentItemsList"
    [customTemplate]="customTagComponentTemplate"></sbase-tags>
  <ng-template #customTagComponentTemplate>
    <div>
      <div *ngFor='let item of inputList'>
        {{item.name}}
      </div>
    </div>
  </ng-template>
  `
})


export class AppComponent {
  parentItemsList = [
    {
      name: 'Item1',
    },
    {
      name: 'Item2',
    },
  ];
}'

我希望在提供自定义模板时显示inputList,但未定义。 关于如何使用子组件功能和自定义html模板的任何想法吗?

0 个答案:

没有答案