Google otomatik tamamlayıcı yeri, Angular 2

Question

'daki Çocuk Bileşeninde çalışmıyor Google places autocompletor için googleplace yönergesini kullanıyordum. Bu yönergeyi, bağlantıda gösterildiği gibi AppComponent içinde kullandığımda çalışır, ancak alt bileşenleri Bileşen'de kullandığımda çalışmaz.

import { provideRouter, RouterConfig } from '@angular/router'; 

import { BaseComponent } from './components/base/base.component'; 
import { DashboardComponent } from './components/dashboard/dashboard.component'; 


const routes: RouterConfig= 
    [ 
     {path:"",redirectTo:"/admin",pathMatch:'full'}, 

     {path:"admin",component:BaseComponent, 
      children:[ 
        { path: '', component: BaseComponent}, 
        { path: 'dashboard', component: DashboardComponent}, 
       ] 
     } 

    ]; 


export const appRouterProviders = [ 
    provideRouter(routes) 
]; 

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {AppComponent} from './app.component'; 
import {appRouterProviders} from './app.routes'; 


bootstrap(AppComponent,[appRouterProviders]); 

app.component.tsapp.routes.ts base.html<router-outlet></router-outlet> sahiptir

import {Component} from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 


@Component({ 
    selector : 'my-app', 
    template: ` 
      <router-outlet></router-outlet> 
     ` , 
     directives:[ROUTER_DIRECTIVES] 
}) 
export class AppComponent { 

} 

base.component.ts

import {Component,OnInit} from '@angular/core'; 
import { provideRouter, RouterConfig,ROUTER_DIRECTIVES,Router } from '@angular/router'; 



@Component({ 
    selector: 'app-base', 
    templateUrl:"../app/components/base/base.html", 
    directives:[ROUTER_DIRECTIVES], 
    precompile:[] 

}) 



export class BaseComponent implements OnInit{ 

     constructor(private _router:Router){} 

     ngOnInit():any{ 

      this._router.navigate(["admin/dashboard"]); 
     } 
} 

içeriği vardır

dashboard.component.ts

import {Component,OnInit} from '@angular/core'; 

import { provideRouter, RouterConfig,ROUTER_DIRECTIVES,Router } from '@angular/router'; 
import {GoogleplaceDirective} from './../../../directives/googleplace.directive'; 



@Component({ 
    selector: 'dashboard', 
    template:` 
     <input type="text" [(ngModel)] = "address" (setAddress) = "getAddress($event)" googleplace/> 
    `, 
    directives:[ROUTER_DIRECTIVES,GoogleplaceDirective] 
}) 

export class DashboardComponent implements OnInit{ 

     constructor(private _router:Router){} 

     ngOnInit():any{ 

      // this._router.navigate(["dashboard/business"]); 
     } 

     public address : Object; 
     getAddress(place:Object) {  
      this.address = place['formatted_address']; 
      var location = place['geometry']['location']; 
      var lat = location.lat(); 
      var lng = location.lng(); 
      console.log("Address Object", place); 
     } 
} 

googleplace.directive

import {Directive, ElementRef, EventEmitter, Output} from '@angular/core'; 
import {NgModel} from '@angular/common'; 

declare var google:any; 

@Directive({ 
    selector: '[googleplace]', 
    providers: [NgModel], 
    host: { 
    '(input)' : 'onInputChange()' 
    } 
}) 
export class GoogleplaceDirective { 
    @Output() setAddress: EventEmitter<any> = new EventEmitter(); 
    modelValue:any; 
    autocomplete:any; 
    private _el:HTMLElement; 


    constructor(el: ElementRef,private model:NgModel) { 
    this._el = el.nativeElement; 
    this.modelValue = this.model; 
    var input = this._el; 
    this.autocomplete = new google.maps.places.Autocomplete(input, {}); 
    google.maps.event.addListener(this.autocomplete, 'place_changed',()=> { 
     var place = this.autocomplete.getPlace(); 
     this.invokeEvent(place); 
    }); 
    } 

    invokeEvent(place:Object) { 
    this.setAddress.emit(place); 
    } 


    onInputChange() { 
    } 
} 

index.html

Çıkış:

Güncelleme:

o yuvalanmış Örneğin yukarıdaki olarak biz iç içe olan yönlendirici-çıkış çalışmak projede bir yönlendirici-çıkış etiketi olduğunda mükemmel çalışır, ancak başarısız olur, o Bulundu yönlendirici-çıkış

Github link here

yönergesi kodu ile herhangi bir sorun var mı Bir bileşenin alt bileşenleri ile? Lütfen bu sorunu nasıl çözebileceğimi bana bildirin.