Angular2(单击)动态加载组件视图

发布时间：2020-12-17 17:32:53 所属栏目：安全来源：网络整理

导读：我创建了单击以动态加载组件视图,但我每次单击都是单独的.我想有函数,我通过函数传递一个字符串,而不是在我的函数中输入该字符串来加载视图. 这是一个工作的plunker http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview 零件 @Component({ selector: 'my-a

我创建了单击以动态加载组件视图,但我每次单击都是单独的.我想有函数,我通过函数传递一个字符串,而不是在我的函数中输入该字符串来加载视图.

这是一个工作的plunker
http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview

零件

@Component({
  selector: 'my-app',template: `
    <div>
      <h2>Lets dynamically create some components!</h2>
      <button (click)="createHelloWorldComponent()">Create Hello World</button>
      <button (click)="createWorldHelloComponent()">Create World Hello</button>
      <dynamic-component [componentData]="componentData"></dynamic-component>
    </div>
  `,})

export class App {
  componentData = null;

  createHelloWorldComponent(){

    this.componentData = {
      component: HelloWorldComponent,inputs: {
        showNum: 9
      }
    };
  }

  createWorldHelloComponent(){
    this.componentData = {
      component: WorldHelloComponent,inputs: {
        showNum: 2
      }
    };
  }
}

想要的是一个函数,并从数组中定义一个在(click)中传递并加载视图的变量.
这是一个尝试的plunker：http://plnkr.co/edit/HRKGhCCEfkOhNjXbr6C5?p=preview

@Component({
  selector: 'my-app',template: `
    <div>
      <h2>Lets dynamically create some components!</h2>

          <li *ngFor="let item of myMenu">

              <button (click)="loadView({{ item.viewname }})">{{ item.id }}</button>
         </li>

      <dynamic-component [componentData]="componentData"></dynamic-component>
    </div>
  `,})
export class App {
  componentData = null;
   myMenu = {};
      constructor() {
        this.myMenu = myMenu;

      }

  loadView(viewName){

    this.componentData = {
      component: viewName,inputs: {
        showNum: 9
      }
    };
  }


}

const myMenu = [
    {
     id: 1,viewname: 'HelloWorldComponent'
    },{
     id: 2,viewname: 'WorldHelloComponent'

    },];

解决方法

使用以下代码,

@Component({
  selector: 'my-app',template: `
    <div>
      <h2>Lets dynamically create some components!</h2>
      <button (click)="createComponent($event)">Create Hello World</button>
      <button (click)="createComponent($event)">Create World Hello</button>
      <dynamic-component [componentData]="componentData"></dynamic-component>
    </div>
  `,})

组件方法将具有以下代码

createComponent(val){
    if(val.srcElement.innerHTML==='Create Hello World')
    {
      this.createHelloWorldComponent()
    }
     if(val.srcElement.innerHTML==='Create World Hello'){
       this.createWorldHelloComponent()
     }
  }

LIVE DEMO更新了您的plunker.

更新1：当你还没准备好在if条件中处理它们时,你应该有一个映射属性来根据被点击的项返回componentData.

var myComponents =[{
        id : 1,component: HelloWorldComponent,inputs: { showNum: 9 }
    },{
        id : 2,component: WorldHelloComponent,inputs: { showNum: 0 }
    }];
var myMenu =    [{
    id: 1,viewname: 'HelloWorldComponent',componentID : 1
    },viewname: 'WorldHelloComponent',componentID : 2
    }];

LIVE DEMO

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!