- 组件(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();
}
}
原文地址:https://www.cnblogs.com/wyp1988/p/12510068.html
时间: 2024-08-30 13:42:02