是否可以在同一个模板中安装多个路由器插座？
如果是,那么如何配置路由？
我正在使用angular2 beta.
我正在开发Angular2(Beta 8)中的一个组件.该组件有一个文本框和一个下拉列表.我想在加载组件时或在下拉列表的更改事件中将焦点设置在文本框中.我如何在angular2中实现这一目标.以下是组件的Html.
<div>
<form role="form" class="form-horizontal ">
<div [ngClass]="{showElement:IsEditMode, hidden:!IsEditMode}">
<div class="form-group">
<label class="control-label col-md-1 col-sm-1" for="name">Name</label>
<div class="col-md-7 col-sm-7">
<input id="name" type="text" [(ngModel)]="person.Name" class="form-control" />
</div>
<div class="col-md-2 col-sm-2">
<input type="button" value="Add" (click)="AddPerson()" class="btn btn-primary" />
</div>
</div>
</div>
<div [ngClass]="{showElement:!IsEditMode, hidden:IsEditMode}">
<div class="form-group">
<label class="control-label col-md-1 col-sm-1" for="name">Person</label>
<div class="col-md-7 col-sm-7">
<select [(ngModel)]="SelectedPerson.Id" (change)="PersonSelected($event.target.value)" class="form-control">
<option *ngFor="#item of PeopleList" value="{{item.Id}}">{{item.Name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>我正在开发一个Angular2应用程序,我需要显示 - 但是disable一个<a> HTML元素.这样做的正确方法是什么？
更新
请注意*ngFor,这将阻止使用*ngIf和完全渲染的选项<a>.
<a *ngFor="let link of links"
href="#"
[class.disabled]="isDisabled(link)"
(click)="onClick(link)">
{{ link.name }}
</a>
该打字稿组件具有类似如下的方法:
onClick(link: LinkObj) {
// Do something relevant with the object...
return false;
}
我需要实际上阻止元素被点击,而不仅仅是出现在CSS中.我假设我首先需要绑定到[disabled]属性,但这是不正确的,因为锚元素没有disabled属性.
我看着并考虑使用pointer-events: none但这阻止了我的cursor: not-allowed工作风格- 这是要求的一部分.
我开始学习Angular2.我一直在关注angular.io提供的英雄教程.一切正常,直到被使用模板的HTML杂乱所困扰,我在其位置使用模板URL,并将HTML移动到名为hero.html的文件.生成的错误是"无法读取未定义的属性'名称".奇怪的是,可以访问指向对象数组的英雄变量,以便ngFor将根据数组中的对象数量生成正确数量的"li"标记.但是,无法访问阵列对象的数据.此外,即使是包含一些文本的简单变量,也不会使用HTML中的{{}}括号显示(请参阅提供的代码).
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './hero.html',
styleUrls:['./styles.css']
})
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
selectedHero:Hero;
onSelect(hero: Hero):void{
this.selectedHero = hero;
}
}
export class Hero{
id: number;
name: string;
}
const HEROES: Hero[] = [
{ id: 1, name: 'Mr. Nice' },
{ id: 2, name: 'Narco' },
{ id: 3, name: 'Bombasto' },
{ id: 4, name: 'Celeritas' },
{ id: 5, name: 'Magneta' },
{ …使用Angular 2,我想多次复制模板中的一行.迭代一个对象很容易*ngFor="#object of objects".但是,我想运行一个简单的for循环,而不是foreach循环.像(伪代码)的东西:
{for i = 0; i < 5; i++}
<li>Something</li>
{endfor}
我该怎么做？
我无法为Angular2找到一个好的自动完成组件.任何我可以传递一个键标签对象列表并在一个input字段上有一个很好的自动完成的东西.
剑道还不支持Angular 2,而且它是我们内部使用的.Angular Material似乎也不支持Angular 2.
任何人都可以指出我正确的方向或让我知道他们正在使用什么？
这是我到目前为止所建立的.这很糟糕,我想找一些看起来不错的东西.
import {Component, EventEmitter, Input, Output} from 'angular2/core';
import {Control} from 'angular2/common';
import {Observable} from 'rxjs/Observable';
import {SimpleKeyValue} from '../models/simple-key-value'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
@Component({
selector: 'general-typeahead',
template: ` <div>
<div class="input-group">
<input type="text" [ngFormControl] = "term" class="form-control" placeholder={{placeHolder}} >
</div>
<ul>
<li class="item" *ngFor="#item of matchingItems" (click)="selectItem(item)">
{{item.value}}
</li>
</ul>
</div>`
})
export class GeneralTypeahead {
matchingItems: Array<SimpleKeyValue>;
term = new Control();
@Input() allItems: Array<SimpleKeyValue>;
@Input() placeHolder: string;
@Output() …给定一个简单的输入元素,我可以这样做:
<input [(ngModel)]="name" /> {{ name }}
这不适用于我的自定义元素:
<my-selfmade-combobox [(ngModel)]="name" values="getValues()" required></my-selfmade-combobox>
我该如何实现它？
在Angular 2组件中我有 authbox.component.ts
import {Component} from 'angular2/core';
import {COMMON_DIRECTIVES} from 'angular2/common';
import {Credentials} from './credentials'
@Component({
selector: 'authbox',
template: `<div>
<div class="login-panel" *NgIf="!IsLogged">
<input type="text" *NgModel="credentials.name" />
<input type="password" *NgModel="credentials.password" />
<button type="button" (click)="signIn(credentials)">?| Sign In</button>
</div>
<div class="logged-panel" *NgIf="IsLogged">
<span>{nickname}</span> <button type="button" (click)="signOut()">|? Sign out</button>
</div>
</div>`,
directives: [COMMON_DIRECTIVES]
})
export class AuthBoxComponent {
private _isLogged: boolean;
get IsLogged(): boolean {
return this._isLogged
}
set IsLogged(value: boolean) {
this._isLogged = value;
}
public credentials: Credentials;
}
在浏览器中我遇到错误« 无法绑定到'NgModel',因为它不是已知的本机属性 »和« …
我正在使用Angular2和Typscript.我有一个枚举:
export enum Role {
ServiceAdmin, CompanyAdmin, Foreman, AgentForeman,
CrewMember, AgentCrewMember, Customer
}
我想使用*ngFor迭代枚举.做这个的最好方式是什么？我必须创建一个管道吗？或者有更简单的方法吗？
我想在我的模板中创建一个项目列表,用逗号分隔,但我不希望最后一个项目有逗号:
one, two, three
如何使用Angular 2的模板语法实现此目的？