Question

我目前正在建立一个仪表板，其中包含多个共享相同输入的dashlet组件。所有输入都在基本组件中定义。我想在仪表板组件中执行的操作是使用ngFor动态创建所有dashlet，并将基本组件用作一种占位符，并将其替换为子组件。

我正在寻找一个可以使用输入和输出修饰符的解决方案，因为它使代码更易于维护。它使ChangeDetection的整个故事变得更加简单，我可以使用ngOnChanges之类的东西。因此，尽管从技术上讲ComponentFactory并不是我想要的解决方案。

以下是我正在考虑的示例：

base.component.ts

<div class="container-fluid" id="upper;">
    <div class="row">
        <div>
            <ul style="display: -webkit-box; color: white; background: #5db2ff; font-size: 16px; font-family: 'Segoe UI'; height: 22px; ">
                @foreach (var item in Model)
                {
                    <li class="parent">
                        <a class="first">  @item.Name</a>

                        <ul class="LastHope" style="overflow-y: visible !important; color: white; font-size: 16px; font-family: 'Segoe UI'; width: 80%; background: #338dc7; border-left: 1px solid white; ">
                            @foreach (var Temp in item.T_Page.ToList())
                            {

                                <li class="child">
                                    <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">@Temp.Name</a>
                                </li>
                            }
                        </ul>
                    </li>


                }
            </ul>
        </div>
    </div>
</div>

child.component.ts

@Component({
  selector: 'app-base',
  templateUrl: './base.component.html',
  styleUrls: ['./base.component.scss']
})
export class BaseComponent implements OnInit {
  @Input() id: number;
  @Input() name: string;

  constructor() { }

  ngOnInit() { }
}

dashboard.component.html

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChildComponent extends BaseComponent implements OnInit, OnChanges {

  constructor() {
    super();
  }

  ngOnInit() { }

  ngOnChanges() {
    // do something on changes
  }
}

Answer 1

您可以在BaseComponent中使用ng-content，以便可以将所有常见的部件放置在BaseComponent中，而将所有与子部件不同的部件放置在ng-content下。然后在AppComponent中进行相应的更改，

<div *ngFor="let dashlet of dashletList">
  <app-base [id]="dashlet.id" [name]="dashlet.name">
    <ng-container *ngComponentOutlet="dashlet.type"></ng-container>
  </app-base>
  <!-- later app-base withh be replaced by app-child or any other dashlet-->
</div>

演示https://stackblitz.com/edit/angular-ppscqy

使用基本组件动态创建组件

1 个答案: