Passar parâmetro de rota para componente filho como entrada em Angular 2

Briquete

Eu tenho um componente pai que obtém um valor de id de um parâmetro de rota. Eu quero passar isso para um componente filho, então estou fazendo isso por meio de um Input()decorador no componente filho. No entanto, estou tendo problemas para passar o valor do parâmetro de rota para a criança. Se eu embutir um valor no código e passá-lo para o filho, ele funcionará, então tenho certeza de que a ligação e a lógica do componente filho estão corretos; Acho que é apenas um problema de como / onde estou definindo o valor dinamicamente.

Este é o componente pai completo com alguns comentários:

import { Component }                                                from '@angular/core';
import { HTTP_PROVIDERS }                                           from '@angular/http';
import { provide }                                                  from '@angular/core';
import { Routes, Router, RouterUrlSerializer, ROUTER_DIRECTIVES }   from '@angular/router';
import { Location }                                                 from '@angular/common';
import { XHRBackend }                                               from '@angular/http';

import { ContentNode }                                              from './content-node';
import { ContentTreeComponent }                                     from './content-tree.component';
import { ContentDashboardComponent }                                from './content-dashboard.component';
import { ContentEditComponent }                                     from './content-edit.component';

import { ContentService }                                           from '../services/content.service';
import { InitService }                                              from '../services/init.service';
import { RouteNames }                                               from '../services/route-names.service';

@Component({
    selector: 'my-dashboard',
    template: `
        <div class="tree-panel-container">
            <div class="tree-panel-content">
                <content-tree [startNodeId]="startNodeIdContent" [currentNodeId]="currentNodeId"></content-tree>
            </div>
        </div>
        <router-outlet></router-outlet>
    `,
    directives: [
        ContentTreeComponent, 
        ContentDashboardComponent, 
        ROUTER_DIRECTIVES
    ],
    providers: [
        HTTP_PROVIDERS
    ]
})
@Routes([
    { path:'/',    component: ContentDashboardComponent },
    { path:'/:id', component: ContentEditComponent }
])
export class ContentComponent {

    _currentNodeId: number;

    constructor(private router:Router, private routeSerializer:RouterUrlSerializer, private location:Location) {
        router.changes.first().subscribe(() => {
            let urlTree = this.routeSerializer.parse(location.path());
            let urlSegment = urlTree.children(urlTree.children(urlTree.root)[0])[0];
            if(urlSegment != undefined){
                let id = urlSegment.segment;
                this._currentNodeId = id;
                console.log('_currentNodeId', this._currentNodeId); // This works - it logs the correct id from the route param
            }
        });
    }

    startNodeIdContent = InitService.startNodeIdContent;
    currentNodeId = this._currentNodeId; // This doesn't work - it just results in 'undefined' in the child component

    // The following line works; it passes 123 to the child component, so I know the binding and the child input is set up correctly:
    // currentNodeId = 123;
}

... e aqui está o componente filho:

import { Component, Input, OnInit }         from '@angular/core';
import { Router, RouteSegment, RouteTree }  from '@angular/router';

import { ContentNode }                      from './content-node';
import { ContentService }                   from '../services/content.service';


@Component({
    selector: 'content-tree',
    directives: [ContentTreeComponent],
    template: `
        <ol class="tree">
            <li *ngFor="let contentNode of contentNodes" class="tree__branch" [ngClass]="{'tree__branch--has-children': contentNode.HasChildren}">
                <a *ngIf="contentNode.HasChildren" (click)="contentNode.toggle=!contentNode.toggle" class="tree__branch__toggle">
                    {{ !!contentNode.toggle ? '-' : '+' }}
                </a> 
                <a class="tree__branch__link" (click)="onSelect(contentNode)">{{ contentNode.Name }}</a>
                <content-tree *ngIf="contentNode.toggle" [startNodeId]="contentNode.Id"></content-tree>
            </li>
        </ol>
        <div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
        <p>{{test}}</p>
    `
})
export class ContentTreeComponent implements OnInit {

    constructor(
        private _contentService: ContentService,
        private _router: Router,
        private _currSegment: RouteSegment
    ) { }

    errorMessage: string;

    @Input('startNodeId')
    private _startNodeId: number;

    @Input('currentNodeId')
    private _currentNodeId: number;

    contentNodes: ContentNode[];

    ngOnInit() { 
        this.getContentNodes();

        console.log('_startNodeId = ' + this._startNodeId);
        console.log('_currentNodeId = ' + this._currentNodeId);
    }

    onSelect(contentNode: ContentNode) {
        this._router.navigate([`./${contentNode.Id}`], this._currSegment);
    }

    getContentNodes() {
        this._contentService.getContentNodes(this._startNodeId)
            .subscribe(
                contentNodes => this.contentNodes = contentNodes,
                error =>  this.errorMessage = <any>error
            );
    }
}
Günter Zöchbauer

O roteador adiciona componentes usando ViewContainerRef.createComponent. Para componentes adicionados desta forma @Input()e @Output()não são suportados.

Uma maneira comum de compartilhar dados entre componentes onde entradas e saídas não são suportadas é um serviço compartilhado. Para obter mais detalhes, consulte https://angular.io/docs/ts/latest/cookbook/component-communication.html

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Como obter o parâmetro de entrada no componente filho Angular?

Como passar o valor de entrada do componente pai para o filho sem usar ng no angular?

Passar parâmetro de rota de rotas pai para filho

Como passar o valor de entrada como parâmetro para o roteador em Angular

No React, como passar um parâmetro de um componente filho para um componente pai?

No React, como passar um parâmetro de um componente filho para um componente pai?

Obtendo um parâmetro de rota em um componente filho Angular

Angular 2: como passar atributos para o componente filho?

Como passar um parâmetro para rota secundária de uma rota irmã em Nativescript

Angular 2 - como passar dados para um componente filho sem renderizar o componente filho duas vezes?

Como passar dados para o componente de atributo Angular 2 aninhado (filho)

Passar a rota de reação para o componente filho

Como obter: parâmetro de id da rota secundária do componente pai em Angular2

In React js Como passar o valor de entrada para o parâmetro API no componente atual

como passar o parâmetro de rota laravel para vue

Angular 2 ng-bootstrap Modal: Como passar dados para o componente de entrada

Como faço para redirectTo componente filho com determinado parâmetro no angular2

Como passar um modelo personalizado (html) para o componente filho via componente pai no angular 2?

Como posso passar os objetos do componente Pai para o componente Filho no Angular 2?

Como passar o parâmetro href do componente pai vue para o componente filho?

Como passar dados recebidos de dataService de pai para filho em Angular2

Como passar o valor de entrada do componente filho para o pai reage

Como passar dados de um componente filho para um componente pai em React.js

Como passar dois argumentos para uma função de componente pai do componente filho angular 7?

Como passar parâmetro para uma rota

Como passar mean () como parâmetro de entrada para outra função em Python?

Angular 2: Como passar parâmetros de rota para o sub-roteamento?

Como posso passar um List <string> como um parâmetro para um componente filho no blazor?

Como passar adereços de componente filho para componente pai para outro componente filho no ReactJS?