使用ng-template更改视图时如何传递数据

Question

I have a component that has a dynamic view, which I am implementing using an ng-template . The following is that component, lets say parent.component.ts .

@Component({
    ...
    template: '<div><ng-template child-area></ng-template></div>',
    ...
})

export class ParentComponent implements OnInit {

    @ViewChild(ChildAreaDirective) childArea: ChildAreaDirective;

    loadComponent (details) {
        let _vcf = this.childArea.viewContainerRef;
        let _cf= resolveComponentFactory(childrenList[details.name]);

        // How do I pass the options object from here into the child component??
        this.childOptions = details.options;

        let componentRef = _vcf.createComponent(_cf);
    }
}

The child.component.ts is written like this:

@Component ({
    template: '<div>{{ title }}</div>'
})

I want to call the loadComponent method like this:

parent.loadComponent({ name: 'choose-doc', options: {title: "Main File"} });

How can I pass the options object into the child component, so that the title gets the value 'Main File'?

Answer 1

componentRef has the attribute instance which is the actual instance of the created component. From this instance, you can access to all public attributes and functions of the component.

You can map your options inside a function on the component or just set them from loadComponent .

Check the class doc: https://angular.io/api/core/ComponentRef#instance