账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    angular展示动态组件
    22
    0

    大家好，我正在使用angular4.x和cli开发网页。现在我正在面临一个架构上的问题，想请教一下sg的各位大神们。

    我现在有一个列表组件，用来在不同情况下展示出不同的子组件。代码如下：

    <div [ngSwitch]="type">
    <component-one  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-one>
    
    <component-two  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-two>
    
    <component-three  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-three>
    
    <component-four  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-four>
    
    <component-five  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-five>
    
    <component-six  *ngSwitchCase="......"
            [someInput]="..."
            (someOutput)="..."
    ></component-six>
</div>

    我现在的做法就是使用了ngSwitch，根据type属性进行判断，如果匹配上某一个组件就把它显示出来，同时给它添加上一些input和output的属性用父子组件之间的交流。现在运行一切良好，可是随着程序的扩大，需要动态展现的组件变得越来越多，整个html页面变得异常庞大，也有点恶心。

    因此，我打算进行重构，我准备使用的方法就是动态组件Dynamic Component的方法。在阅读完相关的文档（angular.cn）后，我不再使用ngSwitch来判断，而是根据type属性，动态创建出component并且将其嵌入到一个固定的位置中：

    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);  //解析一个component
this.viewContainerRef.clear();
this.componentRef = this.viewContainerRef.createComponent(componentFactory);

    并且为其加入input和output属性

    (this.componentRef.instance).someInput = this.someData;

    以上全部内容都和官方文档没有太大差异。可是我却发现，动态加载的组件，根本不会调用ngOnChanges方法（https://github.com/angular/an...）。这导致动态加载的组件的很多逻辑都会出现错误。

    所以，我现在总结一下我的两大类方法：1.使用ngSwitch，会出现代码庞大，十几个component堆在html文件中的情况，我觉得比较恶心。2.使用动态组件，发现动态组件对@Input，@Output还有生命钩子的支持都很不足。

    最后想问下大家：当一个列表组件需要根据不同情况，加载不同组件时，使用什么方式可以整洁地把这些组件加载出来，并且可以做到子组件和父组件之间的信号传递完整，子组件可以正常更新？

    谢谢！

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 残あ梦ぎ鱼 普通会员 1楼

      在Angular中，动态组件是指通过JavaScript动态生成和添加组件到应用中的组件。这可以通过ngFor指令来实现。

      以下是一个简单的例子：

      html <app-employee-list></app-employee-list>

      在这个例子中，<app-employee-list>是一个动态组件。<app-employee>是一个静态组件，它只是在页面上显示一个列表。当我们运行ngFor指令时，它会根据<app-employee>的值来动态生成和添加到列表中。

      例如，我们可以定义一个Employee对象：

      typescript export class Employee { name: string; age: number; }

      然后，我们可以定义一个EmployeeList组件：

      ```typescript import { Component, OnInit } from '@angular/core';

      @Component({ selector: 'app-employee-list', templateUrl: './employee-list.component.html', styleUrls: ['./employee-list.component.css'] }) export class EmployeeListComponent implements OnInit { employees: Employee[] = [];

      constructor() { }

      ngOnInit() { this.employees = [ { name: 'John Doe', age: 30 }, { name: 'Jane Doe', age: 25 }, { name: 'Bob Smith', age: 35 } ]; } } ```

      在EmployeeListComponent中，我们定义了一个数组employees来存储所有员工的Employee对象。然后，我们在ngOnInit方法中初始化这个数组，并将其值设置为一个包含三个Employee对象的数组。

      最后，我们可以在EmployeeListComponent中使用ngFor指令来动态生成和添加员工：

      html <app-employee-list></app-employee-list>

      这样，<app-employee>就会根据EmployeeListComponent中的值来动态生成和添加到列表中。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部