在将一个组件添加到根组件的指令数组中之后,Angular2开始在浏览器中抱怨自我封闭"meta"标签应该没问题,并且如果指令不在那里也可以不用抱怨.
我正在尝试将my-header组件添加到我的应用程序中.
app.html
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
FM Radio
99.4 MHz
account_circle
Mirko Horvatadministrator
header.ts
import { Component } from 'angular2/core';
import { FORM_DIRECTIVES, COMMON_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control } from 'angular2/common';
@Component({
selector: 'my-header',
templateUrl: '.dest/app/header',
styles: [],
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
});
}
}
peterh says .. 33
在现实中,尽管有其他答案,问题的真正原因可以在版本2.0.0-alpha48 BREAKING CHANGES
的angular2 changelog部分找到:
对于没有内容的void元素,过去可以容忍结束标记.它们不再被允许,因此我们更加严格遵循HTML5规范.
因此,如果您有一个类似的代码
,例如您在互联网上的示例中将其读取为早于2.0.0-alpha48的angular2版本,则它将无效.
但是,
会工作!
angular2开发人员认为,他们希望"更紧密地"遵循HTML5.我对他们应该做什么的看法是完全不同的.
目前尚不清楚,文档或错误信息对"无效或外来元素"的理解.我怀疑,也许为我们自己的标签使用不同的html命名空间(即有一个
)也可能有效.
在现实中,尽管有其他答案,问题的真正原因可以在版本2.0.0-alpha48 BREAKING CHANGES
的angular2 changelog部分找到:
对于没有内容的void元素,过去可以容忍结束标记.它们不再被允许,因此我们更加严格遵循HTML5规范.
因此,如果您有一个类似的代码
,例如您在互联网上的示例中将其读取为早于2.0.0-alpha48的angular2版本,则它将无效.
但是,
会工作!
angular2开发人员认为,他们希望"更紧密地"遵循HTML5.我对他们应该做什么的看法是完全不同的.
目前尚不清楚,文档或错误信息对"无效或外来元素"的理解.我怀疑,也许为我们自己的标签使用不同的html命名空间(即有一个
)也可能有效.
问题是,当然,我有一个错字.将.html
在templateUrl:
失踪了.
我有:
@Component({ selector: 'my-header', templateUrl: './dest/App/MyHeader', styles: [], directives: [ FORM_DIRECTIVES, COMMON_DIRECTIVES ] })
我应该有
@Component({ selector: 'my-header', templateUrl: './dest/App/MyHeader.html', styles: [], directives: [ FORM_DIRECTIVES, COMMON_DIRECTIVES ] })