Question

是否可以对功能模块声明中列出的组件执行ngFor？它们都有一些共同点，例如标题，设置动作，查看全部，但是每个组件都做了非常不同的事情，显示不同的数据等。是否有人知道如何最好地实现这一目标？

Answer 1

我找到了以下solution，我将其重新用于自己的代码。请查看并了解您的想法。

家庭模块：

export const routes: Routes = [
    { path: '', component: HomePageComponent }
];

@NgModule({
    imports: [CommonModule,
        RouterModule.forChild(routes),
        MdGridListModule,
        MdCardModule,
        MdIconModule,
        MdButtonModule
    ],
    declarations: [
        HomePageComponent,
        HomeDashboardComponent,
        HomeGizmoComponent,
        HighlightsComponent,
        LawsregComponent,
        NewsComponent,
        StarComponent,
        TracComponent,
        BudgetComponent,
        The12gComponent
    ],
    entryComponents: [
        HighlightsComponent,
        LawsregComponent,
        NewsComponent,
        StarComponent,
        TracComponent,
        BudgetComponent,
        The12gComponent
    ],
    providers: []
})
export class HomeModule { }

主页组件：

@Component({
  selector: 'home',
  template: `<home-dashboard [gizmos]="types"></home-dashboard>`
})
export class HomePageComponent {
    types = [
        HighlightsComponent,
        LawsregComponent,
        NewsComponent,
        StarComponent,
        TracComponent,
        BudgetComponent,
        The12gComponent
    ];



  constructor(title: Title) {
      title.setTitle('Home');

  }


}

Home Dashboard组件：

@Component({
  selector: 'home-dashboard',
  template: `
    <md-grid-list cols="3" gutterSize="1rem" >
  <md-grid-tile *ngFor="let gizmo of gizmos">
    <md-card><home-gizmo-component [type]="gizmo"></home-gizmo-component></md-card>
  </md-grid-tile>
</md-grid-list>

`
})
export class HomeDashboardComponent {
    @Input() gizmos;

  constructor() {

  }
}

Home Gizmo组件：

@Component({
  selector: 'home-gizmo-component',
  template: ` <div #target></div>`
})
export class HomeGizmoComponent {
    @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
    @Input() type: Type<Component>;
    cmpRef: ComponentRef<Component>;
    private isViewInitialized: boolean = false;

    constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler) { }

    updateComponent() {
        if (!this.isViewInitialized) {
            return;
        }
        if (this.cmpRef) {
            // when the `type` input changes we destroy a previously 
            // created component before creating the new one
            this.cmpRef.destroy();
        }

        let factory = this.componentFactoryResolver.resolveComponentFactory(this.type);
        this.cmpRef = this.target.createComponent(factory)
        // to access the created instance use
        // this.compRef.instance.someProperty = 'someValue';
        // this.compRef.instance.someOutput.subscribe(val => doSomething());
    }

    ngOnChanges() {
        this.updateComponent();
    }

    ngAfterViewInit() {
        this.isViewInitialized = true;
        this.updateComponent();
    }

    ngOnDestroy() {
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
    }
}

Answer 2

您可以编写父类组件，并使用extend从子组件继承子组件。

基础组件：

@Component({
  selector : 'my-base',
  template: `
    <div>
      Am I the base component: {{isBase}}?
    </div>
  `
})
export class BaseComponent {
  @Input() isBase: boolean = true;
}

子组件：

@Component({
  selector : 'my-inherited',
  template: `
    <div>
      I'm def not the {{isBase}}!
    </div>
  `
})
export class InheritedComponent extends BaseComponent {}

使用中：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <my-base></my-base>
      <hr />
      <my-inherited [isBase]="false"></my-inherited>
    </div>
  `
})
export class App { }

ngFor功能模块声明中的组件

2 个答案: