组件不能正常呈现 [英] Component not rendering properly

问题描述

我创建了一个plunker显示的问题是什么。

https://plnkr.co/edit/a7F616WCoKbSGXzlYGsM?p=$p$ PVIEW

我有我想要在其他组件使用的组件，我导入它，并把它添加到指令：[]组件装饰的，并没有使...

该组件行list.component，其选择是GB-线名单，我想在这个文件的应用程序/面积list.component.ts使用它。

第一页显示的区域列表，点击上一个区域的时候，我想表明这方面的细节与线条的列表。这行的该列表未渲染...

面积detail.component.ts

 进口{组件，输入的OnInit}从'angular2 /核心;
从angular2 /路由器的进口{RouteParams};
进口{} LineListComponent从'./line-list.component';
进口{}区从'./area.interface';
进口{} LineService从'./lines.service';@零件（{
    选择：[GB-面积详细]'，
    指令：[LineListComponent]
    模板：`
        ＆LT; D​​IV * ngIf =区域＆GT;
            ＆LT; H2＆GT; {{area.name}}区域和LT; / H＆GT;
            ＆LT; GB-线列表[areaID表示] =area.id＆GT;＆LT; / GB-线列表＆gt;
        ＆LT; / DIV＆GT;
    `
}）
出口类AreaDetailComponent实现的OnInit {
    私人区域：区域;    构造函数（
        私人_lineService：LineService，
        私人_routeParams：RouteParams）{}    ngOnInit（）{
        让ID = + this._routeParams.get（'身份证'）;        this._lineService.getArea（id）的
            。然后（面积=＆GT; this.area =面积）;
    }}
 

行list.component.ts

 进口{组件，OnInit中，输入}从'angular2 /核心;进口{} LineService从'./lines.service';
进口{}行从'./line.interface';@零件（{
    选择：[GB-线列表]'，
    模板：`
        ＆LT; UL＆GT;
          ＆LT;李* ngFor =行＃线＆GT; {{line.name}}＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    `
}）
出口类LineListComponent实现的OnInit {
   @input（）areaID表示数;   专用线路：线路[];   构造函数（
       私人_lineService：LineService）{}   getLines（）{
       this._lineService.getLines（this.areaId）
        。然后（线=＆GT; this.lines =行）;
   }   ngOnInit（）{
       this.getLines（）;
   }
}
 

解决方案

的问题是，你作为一个属性选择器选择定义选择：[GB-线列表] ，但您尝试使用元素选择呈现组件＆LT; GB-线列表[areaID表示] =area.id＆GT;＆LT; / GB-线列表＆gt; 。

您有两种选择：结果
- 要么改变选择器选择：GB-线名单结果
- 或元素更改为＆LT; D​​IV GB-线列表[areaID表示] =area.id＆GT;＆LT; / DIV＆GT;

最后，你可能会从角小抄

I created a plunker to show what the problem is.

https://plnkr.co/edit/a7F616WCoKbSGXzlYGsM?p=preview

I have a component I want to use in another component, I imported it and added it to the directives: [] of the component decorator and it does not render...

The component is line-list.component, its selector is gb-line-list and I'm trying to use it in this file app/area-list.component.ts.

the first page shows a list of areas, when clicking on one area, I want to show the detail of this area with a list of line. That's that list of line that is not rendering...

area-detail.component.ts

import {Component, Input, OnInit} from 'angular2/core';
import {RouteParams} from 'angular2/router';
import {LineListComponent} from './line-list.component';
import {Area} from './area.interface';
import {LineService} from './lines.service';

@Component({
    selector: '[gb-area-detail]',
    directives: [LineListComponent],
    template: `
        <div *ngIf="area">
            <h2>{{area.name}} area</h2>
            <gb-line-list [areaId]="area.id"></gb-line-list>
        </div>
    `
})
export class AreaDetailComponent implements OnInit {
    private area: Area;

    constructor(
        private _lineService: LineService,
        private _routeParams: RouteParams){}

    ngOnInit() {
        let id = +this._routeParams.get('id');

        this._lineService.getArea(id)
            .then(area => this.area = area);
    }

}

line-list.component.ts

import {Component, OnInit, Input} from 'angular2/core';

import {LineService} from './lines.service';
import {Line} from './line.interface';

@Component({
    selector: '[gb-line-list]',
    template: `
        <ul>


          <li *ngFor="#line of lines">{{line.name}}</li>
        </ul>
    `
})
export class LineListComponent implements OnInit {
   @Input() areaId: number;

   private lines: Line[];

   constructor (
       private _lineService: LineService) {}

   getLines() {
       this._lineService.getLines(this.areaId)
        .then(lines => this.lines = lines);
   }

   ngOnInit() {
       this.getLines();
   }
}

解决方案

The problem is that you are defining the selector as an attribute selector selector: '[gb-line-list]' but you are trying to render the component using an element selector <gb-line-list [areaId]="area.id"></gb-line-list>.

You have two choices:
- Either change the selector to selector: 'gb-line-list'
- Or change the element to <div gb-line-list [areaId]="area.id"></div>

Finally, you might benefit from Angular Cheat Sheet

这篇关于组件不能正常呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！