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?

TOP lista

  1. 1

    R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

  2. 2

    UITextView não está exibindo texto longo

  3. 3

    Dependência circular de diálogo personalizado

  4. 4

    Acessando relatório de campanhas na AdMob usando a API do Adsense

  5. 5

    Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

  6. 6

    R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

  7. 7

    Setas rotuladas horizontais apontando para uma linha vertical

  8. 8

    O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

  9. 9

    Definir um clipe em uma trama nascida no mar

  10. 10

    Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

  11. 11

    Como dinamizar um Dataframe do pandas em Python?

  12. 12

    regex para destacar novos caracteres de linha no início e no fim

  13. 13

    Why isn't my C# .Net Core Rest API route finding my method?

  14. 14

    Como obter a entrada de trás de diálogo em treeview pyqt5 python 3

  15. 15

    Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

  16. 16

    How to create dynamic navigation menu select from database using Codeigniter?

  17. 17

    Como recuperar parâmetros de entrada usando C #?

  18. 18

    Changing long, lat values of Polygon coordinates in python

  19. 19

    Livros sobre criptografia do muito básico ao muito avançado

  20. 20

    Método \ "POST \" não permitido no framework Django rest com ações extras & ModelViewset

  21. 21

    Pesquisa classificada, conte números abaixo do valor desejado

quentelabel

Arquivo