Question

目标：将对ng-template的引用动态推送到对象中。

挑战：

我正在为每个 @ViewChild参考创建一个ng-template。
我不确定如何将每个@ViewChild推入我的data对象。

//Parent TS Component

export type ITabData = object[];

@Component({
    selector: 'app-style-guide',
    templateUrl: './style-guide.component.html',
    styleUrls: ['./style-guide.component.scss']
})
export class StyleGuideComponent implements OnInit {

// These are a couple <ng-templates> I'm referencing. But as some point we can have many more templates.

    @ViewChild('orderDetails') orderDetails: TemplateRef<any>;
    @ViewChild('anotherTemp') anotherTemp: TemplateRef<any>;

   // My Data object that I want to push all the ViewChild to.

    data: ITabData = [];

    constructor () {
        // I'm pretty sure this is incorrect since it did not work

        this.data.push({ tabLabel: 'newlabel', template: this.orderDetails });
    }

    ngOnInit () {

        // This is how I want the Data object be. 
       //But I want it to fill in programmatically. 
       // It displays in my view when I hardcode it inside the ngOnInit. But obvs that's not good.


        this.data = [
            {
                tabLabel: '1st Label',
                template: this.orderDetails
            },
            {
                tabLabel: '2nd Label',
                template: this.anotherTemp
            }
        ];
    }
}

我希望Data对象会像这样{tabLabel: 'My new label', template: 'my_new_template'这样的新对象动态填充

如果这不可能，建议将不胜感激！

谢谢大家！

Answer 1

你快到了。

问题是您试图在页面中创建ViewChild引用之前将其推入constructor()中的数组中，因此选择器还无法选择任何内容。

相反，您可以像手动操作一样在ngOnInit() life-cycle hook中进行操作。

类似这样：

// Illustration only, you can delete empty constructors
constructor () {}

ngOnInit() {
  this.data.push({ tabLabel: 'newlabel', template: this.orderDetails });
}

作为一般经验法则：Angular中的constructor()基本上仅用于将变量初始化为已知（静态）值或注入类引用（例如Services）。您无法触摸构造函数中的DOM，因为模板在运行时尚未呈现。这就是生命周期挂钩的用途。

作为旁注：也许不需要手动维护该对象数组，@ViewChildren可能会有用。

将TemplateRef推入对象

1 个答案: