我在application Component的HTML里定义了一个router-outlet元素:
遇到错误消息:
router-outlet is not a known element
查看其定义,源代码比文档更有说服力:
/** * @description * * Acts as a placeholder that Angular dynamically fills based on the current router state. * * Each outlet can have a unique name, determined by the optional `name` attribute. * The name cannot be set or changed dynamically. If not set, default value is "primary". * * ``` * <router-outlet></router-outlet> * <router-outlet name='left'></router-outlet> * <router-outlet name='right'></router-outlet> * ``` * * A router outlet emits an activate event when a new component is instantiated, * and a deactivate event when a component is destroyed. * * ``` * <router-outlet * (activate)='onActivate($event)' * (deactivate)='onDeactivate($event)'></router-outlet> * ``` * @ngModule RouterModule * * @publicApi */ export declare class RouterOutlet implements OnDestroy, OnInit { private parentContexts; private location; private resolver; private changeDetector; private activated; private _activatedRoute; private name; activateEvents: EventEmitter<any>; deactivateEvents: EventEmitter<any>; constructor(parentContexts: ChildrenOutletContexts, location: ViewContainerRef, resolver: ComponentFactoryResolver, name: string, changeDetector: ChangeDetectorRef); ngOnDestroy(): void; ngOnInit(): void; get isActivated(): boolean; get component(): Object; get activatedRoute(): ActivatedRoute; get activatedRouteData(): Data; /** * Called when the `RouteReuseStrategy` instructs to detach the subtree */ detach(): ComponentRef<any>; /** * Called when the `RouteReuseStrategy` instructs to re-attach a previously detached subtree */ attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute): void; deactivate(): void; activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null): void; static ɵfac: ɵngcc0.ɵɵFactoryDef<RouterOutlet, [null, null, null, { attribute: "name"; }, null]>; static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<RouterOutlet, "router-outlet", ["outlet"], {}, { "activateEvents": "activate"; "deactivateEvents": "deactivate"; }, never>; }
是一个place holder,Angular根据当前的router state在运行时填充。
解决办法:
在AppModule里导入RouteModule即可: