6
'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.Google otomatik tamamlayıcı yeri, Angular 2
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)
];
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 {
}
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
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() {
}
}
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ış
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.
Post kodu. – dfsq
@dfsq Kod ekran görüntüsü olarak yayınlandı. Metin kodunu göndermemi ister misin? –
Kodu github veya plunker'a yükleyebilir misiniz? –