角度：如何讓路由器出口的組件實例

Question

HTML：

<router-outlet></router-outlet> 

組件：

@Component({ 
     selector: 'xx', 
     templateUrl: './xx.html', 
     styleUrls: ['./xx.css'], 
     providers: [ RouterOutlet] 
    }) 
    export class AppComponent { 
    constructor(private routeroutlet: RouterOutlet){ } 
    getref() { 
    console.log(this.routeroutlet); 
    console.log('refresh', this.routeroutlet.component); 
    } 
} 

我得到這個錯誤

core.es5.js:1224 ERROR Error: Outlet is not activated 
    at RouterOutlet.get [as component] (router.es5.js:5449) 
    at AppComponent.onRefreshscrum (app.component.ts:343) 
    at Object.eval [as handleEvent] (AppComponent.ngfactory.js:111) 
    at Object.handleEvent (core.es5.js:12251) 
    at Object.handleEvent (core.es5.js:12975) 
    at dispatchEvent (core.es5.js:8863) 
    at eval (core.es5.js:11025) 
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3851) 
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:223) 
    at SafeSubscriber.next (Subscriber.js:172) 

控制檯結果：（此.routeroutlet）

RouterOutlet { 
parentContexts: ChildrenOutletContexts, 
location: null, 
resolver: CodegenComponentFactoryResolver, 
changeDetector: ViewRef_, 
activated: null, …}activateEvents: EventEmitter {_isScalar: false, observers: Array(0), 
closed: false, 
isStopped: false, 
hasError: false,  
…} 
closed: false 
hasError: false 
isStopped: false 
observers: []thrown 
Error: null 
__isAsync: false 
_isScalar: false 
__proto__: Subject 
activated: null 
activatedRoute: (...)activatedRouteData: (...)changeDetector: ViewRef_ {_view: {…}, _viewContainerRef: null, _appRef: null} 
component: [Exception: Error: Outlet is not activated 
    at RouterOutlet.get [as component] (webpack:///./~/@angular/router/@angular/router.es5.js?:5449:23) 
    at RouterOutlet.remoteFunction (<anonymous>:2:26)]deactivateEvents: EventEmitter {_isScalar: false, observers: Array(0), 
closed: false, 
isStopped: false, 
hasError: false, …} 
isActivated: (...)location: nulllocationFactoryResolver: (...)l 
ocationInjector: (...)name: "primary" 
parentContexts: ChildrenOutletContexts {contexts: Map(1)}resolver: CodegenComponentFactoryResolver {_parent: null, _ngModule: NgModuleRef_, _factories: Map(52)}_activatedRoute: null__proto__: ObjectactivateWith: ƒ (activatedRoute, resolver)activatedRoute: (...)activatedRouteData: (...)attach: ƒ (ref, activatedRoute)component: (...)deactivate: ƒ()detach: ƒ()isActivated: (...)locationFactoryResolver: (...)locationInjector: (...)ngOnDestroy: ƒ()ngOnInit: ƒ()arguments: (...)caller: (...)length: 0name: ""prototype: {constructor: ƒ}__proto__: ƒ()[[FunctionLocation]]: router.es5.js:5400[[Scopes]]: Scopes[3]constructor: ƒ RouterOutlet(parentContexts, location, resolver, name, changeDetector)get activatedRoute: ƒ()get activatedRouteData: ƒ()get component: ƒ()get isActivated: ƒ()get locationFactoryResolver: ƒ()get locationInjector: ƒ()__proto__: Object 

上述控制檯結果是用於控制檯的routeroutlet obj。

我想訪問在router-outlet中呈現的組件實例。我如何訪問組件的實例？

Answer 1

不要嘗試使用RouterOutlet作爲提供程序。取而代之的是（激活）屬性添加到您的路由器出口標籤是這樣的：

<router-outlet (activate)="onRouterOutletActivate($event)"></router-outlet> 

，然後在含有路由器出口元素組分（您AppComponent類），你應該實現onRouterActivate方法：

public onRouterOutletActivate(event : any) { 
    console.log(event); 
} 

它將爲您提供事件參數中的路由組件實例，在本示例中將寫入到Web控制檯。