我在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即可: