Question

我创建要在父组件中加载的模板组件，具体取决于我从服务器获得的响应。我将简要介绍一下我在伪代码中尝试做的事情。

这是我的html父组件：

<div class="parent-container">
    <div *ngIf="template1"> (load template1.component) </div>
    <div *ngIf="template2"> (load template2.component) </div>
    etc...
</div>

然后我会有不同的组件（为了简洁起见，我将只列出一个）

<div class="child-container">
    <div> {{userName}} </div>
    <div> {{contactNo}} </div>
    <div> {{address}} </div>
</div>

所以在ngInit上，父对服务器发出http请求并获取值。取决于父级中的值，我应该能够将子模板加载到父级中并显示它。因此，一旦加载，页面将如下所示：

<div class="parent-container">
    <div class="child-container">
        <div> {{userName}} </div>
        <div> {{contactNo}} </div>
        <div> {{address}} </div>
    </div>
</div>

角度有可能吗？我该如何创建它？感谢

[修改

我实现了dee zg建议的内容，这是代码：

@ViewChild(HostDirective) host: HostDirective;

OnNgInit(){}

//switch will be a response from a server 
selector(switch){
    switch(switch) { 
       case 'component1': { 
         this.loadComponent(Component1);
         break; 
      }  
      default: { 

         break; 
      } 
   } 

  }

  loadComponent(component){   


    var componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
    var viewContainerRef = this.host;
    this.viewContainerRef.clear();
    var componentRef = this.viewContainerRef.createComponent(componentFactory);

    (componentRef.instance);

  }

这就是我主人的内容

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[host]',
})
export class HostDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

和html

<ng-template host></ng-template>

有趣的是，如果loadComponent中的任何内容都将加载到OnInit中，那么它将起作用。如果我从loadComponent调用它，我将得到该主机未定义。

Answer 1

模板中的

：

<ng-template #yourComponentHost></ng-template>

组件中的

：

@ViewChild('yourComponentHost', { read: ViewContainerRef })
  yourComponentHost;
.
.
.
const componentFactory = this._componentFactoryResolver.resolveComponentFactory(YourComponentType1);
    const viewContainerRef = this.yourComponentHost;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);

    const yourComponentType1Instance = (<YourComponentType1>componentRef.instance);

从此处，您可以通过yourComponentType1Instance访问您的组件。当然，您将在resolveComponentFactory中使用自己的开关逻辑，根据您想要的条件使用您需要的组件。

Answer 2

你正在寻找的东西有点令人困惑。因为您的问题，为什么不为您的孩子创建组件。

<div id="sidebar">
    <div class="toggle-btn" onclick="toggleSidebar()">
    <span></span>
    <span></span>
    <span></span>
    </div>
    <ul>  

    <li>Home </li>
    <li>Contact </li>
    <li>About </li>

    </ul>

如何在父组件

2 个答案: