在将组件添加到根组件的指令数组中之后,Angular2开始在浏览器中抱怨自身封闭的“Meta”标签应该是可以的,如果该指令不在那里也可以没有投诉.
app.html
<div>
<my-header></my-header>
</div>
<nav class="nav-bar">
<div class="nav-bar-top-spacer"></div>
<ul>
<li *ngFor="#group of navigation" class="nav-option-group">
<div class="nav-option-group"></div>
<div (click)="hideGroup(group)" class="nav-option-group-name">{{ group.Croatian }}</div>
<ul [ngClass]="{displayNone: !group.visible}">
<li [routerLink]="[comp.componentName]" *ngFor="#comp of group.components" class="option-group-item">{{ comp.Croatian }}</li>
</ul>
</li>
<li class="nav-option-group">
<div class="nav-option-group-name">Odjavi se</div>
</li>
</ul>
</nav>
<router-outlet></router-outlet>
app.ts
import { Component,View } from "angular2/core";
import { COMMON_DIRECTIVES } from "angular2/common";
import { Http } from "angular2/http";
import { RouteConfig,RouterLink,RouterOutlet,Route,ROUTER_DIRECTIVES,Router} from 'angular2/router';
import { Header } from '../app/header';
import { AccountData } from '../settings/AccountData/AccountData';
import { AccountDelete } from '../settings/AccountDelete/AccountDelete';
import { AccountLogin } from '../settings/AccountLogin/AccountLogin';
import { AccountPassword } from '../settings/AccountPassword/AccountPassword';
import { AddTrack } from '../settings/AddTrack/AddTrack';
import { EditUser } from '../settings/EditUser/EditUser';
import { MakePlaylist } from '../settings/MakePlaylist/MakePlaylist';
import { MakeWishlist } from '../settings/MakeWishlist/MakeWishlist';
import { ManageAdmins } from '../settings/ManageAdmins/ManageAdmins';
import { ManageEditors } from '../settings/ManageEditors/ManageEditors';
import { ManageRadiostation } from '../settings/ManageRadiostation/ManageRadiostation';
import { ManageTracks } from '../settings/ManageTracks/ManageTracks';
import { ManageUsers } from '../settings/ManageUsers/ManageUsers';
var components = ['AccountData','AccountDelete','AccountLogin','AccountPassword','AddTrack','EditUser','MakePlaylist','MakeWishlist','ManageAdmins','ManageEditors','ManageRadiostation','ManageTracks','ManageUsers'];
//var routes = components.map((componentName) => { return new Route(componentName,componentName,componentName) });
@Component({
selector: 'App',templateUrl: './dest/App/App.html',styles: [],directives: [ ROUTER_DIRECTIVES,COMMON_DIRECTIVES,Header ]
})
@RouteConfig([
{ path: '/',redirectTo: ['AccountData'] },{ path: 'AccountData',name: 'AccountData',component: AccountData },{ path: 'AccountDelete',name: 'AccountDelete',component: AccountDelete },{ path: 'AccountLogin',name: 'AccountLogin',component: AccountLogin },{ path: 'AccountPassword',name: 'AccountPassword',component: AccountPassword },{ path: 'AddTrack',name: 'AddTrack',component: AddTrack },{ path: 'EditUser',name: 'EditUser',component: EditUser },{ path: 'MakePlaylist',name: 'MakePlaylist',component: MakePlaylist },{ path: 'MakeWishlist',name: 'MakeWishlist',component: MakeWishlist },{ path: 'ManageAdmins',name: 'ManageAdmins',component: ManageAdmins },{ path: 'ManageEditors',name: 'ManageEditors',component: ManageEditors },{ path: 'ManageRadiostation',name: 'ManageRadiostation',component: ManageRadiostation },{ path: 'ManageTracks',name: 'ManageTracks',component: ManageTracks },{ path: 'ManageUsers',name: 'ManageUsers',component: ManageUsers }
])
export class App {
router: Router;
location: Location;
navigation: any[];
hideGroup(group): void {
group.visible = !group.visible;
}
constructor(router: Router) {
this.router = router;
this.navigation = [
{
'Croatian': 'Slusaj radio','groupName': 'Listen','components': []
},{
'Croatian': 'Vlasničke mogućnosti','groupName': 'OwnerOptions','components': [
{ 'Croatian': 'Upravljaj administratorima','componentName': 'ManageAdmins','componentObject': ManageAdmins },{ 'Croatian': 'Pregledaj podatke o postaji','componentName': 'ManageRadiostation','componentObject': ManageRadiostation }
]
},{
'Croatian': 'Administratorske modućnosti','groupName': 'AdminOptions','components': [
{ 'Croatian': 'Uredi zvučne zapise','componentName': 'ManageTracks','componentObject': ManageTracks },{ 'Croatian': 'Upravljaj urednicima','componentName': 'ManageEditors','componentObject': ManageEditors },{ 'Croatian': 'Dodaj pjesmu','componentName': 'AddTrack','componentObject': AddTrack },{ 'Croatian': 'Upravljaj korisnicima','componentName': 'EditUser','componentObject': EditUser },]
},{
'Croatian': 'Uredničke mogućnosti','groupName': 'EditorOptions','components': [
{ 'Croatian': 'Pregledaj termine','componentName': 'MakePlaylist','componentObject': MakePlaylist }
]
},{
'Croatian': 'Korisničke mogućnosti','groupName': 'UserOptions','components': [
{ 'Croatian': 'Pregledaj listu želja','componentName': 'MakeWishlist','componentObject': MakeWishlist }
]
},{
'Croatian': 'Postavke računa','groupName': 'AccountSettings','components': [
{ 'Croatian': 'Uredi osobne podatke','componentName': 'AccountData','componentObject': AccountData },{ 'Croatian': 'Promijeni lozinku','componentName': 'AccountPassword','componentObject': AccountPassword },{ 'Croatian': 'Obriši račun','componentName': 'AccountDelete','componentObject': AccountDelete }
// { 'Croatian': 'Login','componentName': 'Login','componentObject': Logi}
]
}
];
for (var i = 0; i < this.navigation.length; ++i) {
this.navigation[i].visible = true;
}
};
}
了header.html
<div class="header-bar"> <div class="app-Box"><a href=""> <div class="app-name">FM Radio</div></a> <div class="app-descr">99.4 MHz</div> </div> <div class="user-Box row"> <div class="user-form-Box"> <form [ngFormModel]="loginForm" (onSubmit)="loginForm.value" method="post" action="/user/auth/login" class="row"> <input type="email" id="email" placeholder="E-mail" [ngFormControl]="loginForm.controls['email']" [class.error]="!email.valid && email.touched" [(ngModel)]="emailModel"/> <input type="password" id="password" placeholder="Lozinka" [ngFormControl]="loginForm.controls['password']" [class.error]="!password.valid && password.touched" [(ngModel)]="passwordModel"/> <button type="submit">Prijavi se</button><a href="#register"> <button type="button" class="dim">Registriraj se</button></a> </form> </div> <div class="user-name-Box"><i class="material-icons user-icon">account_circle</i> <div class="user-name">Mirko Horvat<span class="user-type">administrator</span></div> </div> </div> </div>
header.ts
import { Component } from 'angular2/core';
import { FORM_DIRECTIVES,FormBuilder,ControlGroup,Validators,Control } from 'angular2/common';
@Component({
selector: 'my-header',templateUrl: '.dest/app/header',directives: [ FORM_DIRECTIVES,COMMON_DIRECTIVES ]
})
export class Header {
// @Input() modelName
// @Output() eventEmitterName
loginForm: ControlGroup;
email: Control;
password: Control;
emailModel: string;
passwordModel: string;
constructor(fb,FormBuilder) {
this.email = new Control('',Validators.required);
this.password = new Control('',Validators.required);
this.loginForm = fb.group({
'email': this.email,'password': this.password
});
}
}
解决方法
在现实中,尽管有其他答案,问题的真正原因可以在angular2
changelog的版本2.0.0-alpha48的BREAKING CHANGES部分找到：
End tags used to be tolerated for void elements with no content. They
are no more allowed so that we more closely follow the HTML5 spec.
因此,如果您有一个代码,例如< example a =“b”/>,例如,您可以在互联网上的一个示例中将它阅读到早于2.0.0-alpha48的angular2版本,它将无法正常工作.
但是,< example a =“b”>< / example>将工作！
angular2开发人员认为,他们希望更贴近HTML5.我对他们应该做什么的看法是截然不同的.
不清楚的是,文档或错误信息对“void or foreign elements”的理解.我怀疑,也许对于我们自己的标签使用不同的html命名空间(即使用< myapp：example a =“b”/>))也可能正常工作.
