Recuperando uma propriedade de dados em uma rota Angular2, independentemente do nível de aninhamento de rota usando o ActivatedRoute
Eu defini um número de rotas da seguinte maneira:
export const AppRoutes: Routes = [
{path: '', component: HomeComponent, data: {titleKey: 'homeTitle'}},
{path: 'signup', component: SignupComponent, data: {titleKey: 'SIGNUP_FORM.TITLE'}},
{path: 'signin', component: SigninComponent, data: {titleKey: 'SIGNIN_FORM.TITLE'}},
{path: 'sendpasswordresetinformation', component: SendPasswordResetInformationComponent},
{path: 'password/reset/:userAccountToken', component: PasswordResetComponent},
{
path: 'dashboard', component: DashboardComponent, children: [
{path: '', component: DashboardSummaryComponent},
{
path: 'message', children: [
{path: '', component: MessageSummaryComponent, data: {titleKey: 'MESSAGE_LIST.TITLE'}},
{path: 'conversation/:otherId', component: MessageConversationComponent, data: {titleKey: 'XXX'}}]
},
{
path: 'useraccount', component: UserAccountComponent, children: [
{
path: '',
component: UserAccountSummaryComponent,
data: {titleKey: 'XXX'},
resolve: {
userAccount: UserAccountResolve
}
},
{path: 'address', component: UserAccountAddressComponent, data: {titleKey: 'ADDRESS_FORM.TITLE'}},
{path: 'email', component: UserAccountEmailComponent, data: {titleKey: 'EMAIL_FORM.TITLE'}},
{
path: 'emailnotification',
component: UserAccountEmailNotificationComponent,
data: {titleKey: 'EMAIL_NOTIFICATION_FORM.TITLE'}
},
{path: 'firstname', component: UserAccountFirstNameComponent, data: {titleKey: 'FIRST_NAME_FORM.TITLE'}},
{path: 'password', component: UserAccountPasswordComponent, data: {titleKey: 'PASSWORD_FORM.TITLE'}}]
}]
}];
Algumas das rotas são filhos de outras.
Gostaria de encontrar uma maneira de recuperar otitleKey
propriedade emdata
independentemente de o percurso ser de nível superior ou filho de outro.
Aqui está o que eu tentei:
export class AppComponent implements OnInit {
constructor(private translate: TranslateService,
private sessionService: SessionService,
private titleService: Title,
private activatedRoute: ActivatedRoute) {
let userLang = 'fr';
translate.use(userLang);
moment.locale(userLang);
}
ngOnInit() {
this.sessionService.reloadPersonalInfo();
}
setTitle($event) {
this.translate.get(this.activatedRoute.snapshot.data['titleKey'])
.subscribe(translation=>this.titleService.setTitle(translation));
}
}
this.activatedRoute.snapshot.data['titleKey']
éundefined
.
Alguém pode aconselhar como recuperar uma propriedade na rotadata
independentemente do nível de aninhamento da rota?
editar: Depois de ler o funcionáriodocumentação angular sobre ActivatedRoute, Tentei usar omap
operador na propriedade de dados doActivatedRoute
instância da seguinte maneira:
@Component({
selector: 'app',
template: `
<section class="container-fluid row Conteneur">
<appNavbar></appNavbar>
<section class="container">
<router-outlet (activate)="setTitle($event)"></router-outlet>
</section>
</section>
<section class="container-fluid">
<appFooter></appFooter>
</section>
`,
directives: [NavbarComponent, FooterComponent, SigninComponent, HomeComponent, ROUTER_DIRECTIVES]
})
export class AppComponent implements OnInit {
constructor(private translate: TranslateService,
private sessionService: SessionService,
private titleService: Title,
private activatedRoute: ActivatedRoute) {
let userLang = 'fr';
translate.use(userLang);
moment.locale(userLang);
}
ngOnInit() {
this.sessionService.reloadPersonalInfo();
}
setTitle($event) {
this.activatedRoute.data.map(data=>data['titleKey'])
.do(key=>console.log(key))
.switchMap(key=>this.translate.get(key))
.subscribe(translation=>this.titleService.setTitle(translation));
}
}
e aindakey
é sempre indefinido ...