角度：ルータ・コンセントのコンポーネントのインスタンスを取得する方法

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 { 
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 

上記のコンソール結果はコンソールルーター出力レットobjです。

router-outletでレンダリングされるコンポーネントのインスタンスにアクセスしたいとします。私はコンポーネントのインスタンスにどのようにアクセスしますか？

Answer 1

RouterOutletをプロバイダとして使用しないでください。代わりに、このようなあなたのルータコンセントタグに（アクティブ）の属性を追加します。

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

そして、ルータ、アウトレット要素（あなたAppComponentクラス）を含有する成分で、あなたはonRouterActivateメソッドを実装する必要があります

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

を

これは、イベントパラメータのルートコンポーネントインスタンス（この例ではWebコンソールに書き込まれます）を提供します。