Question

在父组件中，我得到了子组件Object。但是如何显示该子组件。我尝试了一些方法但没有用；例如：模板的一部分 html <ng-template [ngComponentOutlet]='children[0]'></ng-template>  父母能力的一部分 ```打字稿

import { Component, OnInit, ViewContainerRef, TemplateRef, ContentChildren, AfterViewInit } from '@angular/core';
import { ISelectItem } from './item-interface';
@Component({
    selector: 'zzj-table-tool-select',
    templateUrl: './table-tool-select.component.html',
    styleUrls: ['./table-tool-select.component.scss']
})
export class TableToolSelectComponent implements OnInit,AfterViewInit {
    children: ISelectItem[] = [];
    @ContentChildren('child') child;
    constructor() { }

    ngOnInit() {
    }
    public addItem(item: ISelectItem) {
      this.children.push(item);
    }
    ngAfterViewInit() {
      console.log('--------');
      console.log(this.child)
    }
}

part of child item component打字稿

import { Component, OnInit, TemplateRef, ContentChild, ViewContainerRef, ViewChild } from '@angular/core';
import { TableToolSelectComponent } from '../table-tool-select.component';
@Component({
  selector: 'zzj-select-item',
  templateUrl: './select-item.component.html',
  styleUrls: ['./select-item.component.scss']
})
export class SelectItemComponent implements OnInit {
  @ViewChild(TemplateRef) content: TemplateRef<void>;
  constructor(public selectPrtCom: TableToolSelectComponent) { }

  ngOnInit() {
    this.selectPrtCom.addItem(this);
    console.log(this.content)
  }
}

``` 我该怎么办？

Answer 1

转到app.component.ts并在文件顶部添加：

import { ChildComponent } from './child/child.component';
Then open app.component.html and replace the content with this:
<h1>
  This is the parent component!
</h1>
<app-child></app-child>

如何在父模板中显示angular的组件Object？

1 个答案: