3. Angular中的组件及服务

标签：route   err   ret   clear   测试   相关   imp   eal   factory   

• 组件（component）
  • 可以使用ng generate component xxx来创建组件相关文件html文件、样式表、ts文件、spec.ts单元测试文件
  • 组件的命名默认要符合XxxComponent，除非关掉tslint中的component-class-suffix设置
  • selector的命名默认要符合app-xxx，除非在tslint中修改component-selector的规则内容
  • 所有的组件都要在NgModule中注册声明

    "component-selector": [
      true,
      "element",
      "makealife",
      "kebab-case"
    ]

• 可以通过组件工厂动态判断和创建组件
  • 下例是在某个时机动态创建某个容器中的组件，这样可以动态选择创建不同的组件，或者在某个container中切换锁显示的组件

<ng-container #stepperContainer></ng-container>
<ng-container *ngIf="!isStepperComponentLoaded">
  ...
</ng-container>



import { Component, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef } from '@angular/core';

export class XXXComponent implements OnInit {

    constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

    loadStepperComponent() {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ConfigStepperComponent);
        this.stepperContainer.clear();
        this.stepperContainer.createComponent(componentFactory);
        this.isStepperComponentLoaded = true;
    }
}

• 如果是通过Angular的路由第二次回到本页面，而不是通过刷新页面，那么上次加载的组件可能不会被销毁和重建，因此有时会有点问题，可以在路由中让本组件一直认为自己是第一次加载页面，那么就每次都会重建组件？可行吗？

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};

this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Trick the Router into believing it's last link wasn't previously loaded
    this.router.navigated = false;
  }
});

ngOnDestroy() {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

3. Angular中的组件及服务

标签：route   err   ret   clear   测试   相关   imp   eal   factory   

原文地址：https://www.cnblogs.com/wyp1988/p/12510068.html