选择器在这种情况下做了什么？
import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [HighlightDirective]
})
export class AppComponent { }
在这种情况下它会做什么？
@Directive({
selector: '[myHighlight]',
host: {
'(mouseenter)': 'onMouseEnter()',
'(mouseleave)': 'onMouseLeave()'
}
})
还有var map,packages,var config在这里做什么我在这里有点困惑他们做任何配置.我看到每个项目,我发现他们放到这个文件的每个地方.这个功能有什么作用？
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular',
'primeng': 'node_modules/primeng'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common', …我有点困惑,在这里做什么$ event事件和这两个例子有什么区别
<button (click)="clicked($event)"></button>
@Component(...)
class MyComponent {
clicked(event) {
event.preventDefault();
}
}
和
<button (click)="clicked()">Click</button>
@Component(...)
class MyComponent {
clicked(event) {
}
}
得到这个"ConnectionBackend没有提供者!" 尝试使用httppromise 时出错.
// ... tl;dr import a bunch of stuff
platformBrowserDynamic().bootstrapModule(MyModule);
// ... tl;dr import a bunch of stuff
@NgModule({
declarations: [
PostComponent
],
providers: [
Actions,
MyService,
Http
],
imports: [
...
],
bootstrap: [MyComponent]
})
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {MyService} from './../services/myService'
import {Post} from './post';
@Component({
templateUrl: 'post.component.html',
styleUrls: ['post.component.css']
})
export class MyComponent implements OnInit {
post: …以下是Angular 2文档中的一些示例构造函数:
export class AppComponent implements OnInit {
title = 'Tour of heroes';
heroes: Hero[];
selectedHero: Hero;
constructor(private heroService: HeroService) { }
getHeroes() {
this.HeroService.getHeroes().then(heroes => this.heroes = heroes);
}
}
和...
class Car {
constructor(engine, tires, doors){
this.engine = engine;
this.tires = tires;
this.doors = doors;
}
}
我不明白为什么以及何时创建一个constructor()角度2 /打字稿(我已经阅读了官方文档,他们为依赖注入和服务创建了一个构造函数).
我正在学习angular2.这里我有以下问题:
我有一个select字段应该作为一个布尔值:
<select [(ngModel)]="caseSensitive">
<option>false</option>
<option>true</option>
</select>
不,如果我在我的过滤器中使用它,它将作为字符串发送而不是作为布尔值.是否可以使用转换器或类似的方式转换它:
这是我完整的HTML代码:
<input [(ngModel)]="nameFilter"/>
<select [(ngModel)]="caseSensitive">
<option>false</option>
<option>true</option>
</select>
<table>
<tr *ngFor="let p of (persons | MyFilter: nameFilter:caseSensitive); let i = index">
<td>{{i + 1 }} </td>
<td>{{
p.givenName+" "+ p.familyName
}}</td>
<td><img src="/img/flags/{{ p.nationality}}.png"></td>
</tr>
</table>
ts代码:
import { Component } from '@angular/core';
import {MyFilter} from './MyFilter';
@Component({
selector: 'pizza-root',
pipes: [MyFilter],
templateUrl: 'app.component.html'
})
export class AppComponent {
public year = new Date().getFullYear();
public persons =[{"givenName":"Paul", "familyName": "Smith", "nationality":"american"}, …我不明白何时使用@Inject以及何时使用@Injectable？
import {Component, Inject, provide} from '@angular/core';
import {Hamburger} from '../services/hamburger';
export class App {
bunType: string;
constructor(@Inject(Hamburger) h) {
this.bunType = h.bun.type;
}
}
和..
import {Injectable} from '@angular/core';
import {Bun} from './bun';
@Injectable()
export class Hamburger {
constructor(public bun: Bun) {
}
}
我有一个组件,我希望它将数据传递给另一个模块中的另一个组件.实际上我app.component是这些儿童模块的父母.我希望每个子模块都能发送一些数据app.component.但他们只是一个路由的孩子和父母.我猜他们实际上并不是父母和孩子.
我的意思是,我的模板app.component看起来像这样:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a routerLink="link1" routerLinkActive="active">Page1</a></li>
<li><a routerLink="link2" routerLinkActive="active">Page2</a></li>
<li><a routerLink="link3" routerLinkActive="active">Page3</a></li>
<li><a routerLink="link4" routerLinkActive="active">Page4</a></li>
</ul>
</div>
</nav>
<div *ngIf="needsSidebar" id="sidebar">some content</div>
<div>
<router-outlet></router-outlet>
</div>
所以app.component与这些模块及其组件没有直接联系.我尝试使用,Output但由于组件来自不同的模块,它失败了.我迷失了,我应该怎么做.我希望我的"子"模块能够向上发送数据,app.module告诉它是否需要侧边栏以及哪些内容应该侧边栏显示.我该怎么做？
我很困惑何时使用术语注释以及何时使用装饰器？
@Component({
selector: 'tabs',
template: `
`
})
export class Tabs {
}
我在primeNG官方网站上搜索过,我发现emptyMessage= "No Record Found"在PrimeNG ref中没有像数据表这样的属性.http://www.primefaces.org/primeng/#/datatable
所以当我的数据表中没有数据时,它没有向我显示任何消息.
<p-dataTable #datatable [value]="jobData" [rows]="20" [paginator]="true"
[responsive]="true" selectionMode="single"><--emptyMessage="" not working here as attribute :(
<p-column expander="true" styleClass="icon"></p-column>
<p-column field="finOrVin" styleClass="vinfin" header="header" sortable="custom" (sortFunction)="sort($event)">
<p-column field="state" styleClass="status" header="Status" sortable="custom" (sortFunction)="sort($event)">
</p-column>
</p-dataTable>