问题描述
我创建了一个plunker显示的问题是什么。
我有我想要在其他组件使用的组件,我导入它,并把它添加到指令:[]组件装饰的,并没有使...
该组件行list.component,其选择是GB-线名单,我想在这个文件的应用程序/面积list.component.ts使用它。
第一页显示的区域列表,点击上一个区域的时候,我想表明这方面的细节与线条的列表。这行的该列表未渲染...
面积detail.component.ts
进口{组件,输入的OnInit}从'angular2 /核心;
从angular2 /路由器的进口{RouteParams};
进口{} LineListComponent从'./line-list.component';
进口{}区从'./area.interface';
进口{} LineService从'./lines.service';@零件({
选择:[GB-面积详细]',
指令:[LineListComponent]
模板:`
< DIV * ngIf =区域>
< H2> {{area.name}}区域和LT; / H>
< GB-线列表[areaID表示] =area.id>< / GB-线列表>
< / DIV>
`
})
出口类AreaDetailComponent实现的OnInit {
私人区域:区域; 构造函数(
私人_lineService:LineService,
私人_routeParams:RouteParams){} ngOnInit(){
让ID = + this._routeParams.get('身份证'); this._lineService.getArea(id)的
。然后(面积=> this.area =面积);
}}
行list.component.ts
进口{组件,OnInit中,输入}从'angular2 /核心;进口{} LineService从'./lines.service';
进口{}行从'./line.interface';@零件({
选择:[GB-线列表]',
模板:`
< UL>
<李* ngFor =行#线> {{line.name}}< /李>
< / UL>
`
})
出口类LineListComponent实现的OnInit {
@input()areaID表示数; 专用线路:线路[]; 构造函数(
私人_lineService:LineService){} getLines(){
this._lineService.getLines(this.areaId)
。然后(线=> this.lines =行);
} ngOnInit(){
this.getLines();
}
}
的问题是,你作为一个属性选择器选择定义选择:[GB-线列表]
,但您尝试使用元素选择呈现组件< GB-线列表[areaID表示] =area.id>< / GB-线列表>
。
您有两种选择:结果
- 要么改变选择器选择:GB-线名单
结果
- 或元素更改为< DIV GB-线列表[areaID表示] =area.id>< / DIV>
最后,你可能会从
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
这篇关于组件不能正常呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!