在将组件添加到根组件的指令数组中之后,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 &amp;&amp; email.touched" [(ngModel)]="emailModel"/>
        <input type="password" id="password" placeholder="Lozinka" [ngFormControl]="loginForm.controls['password']" [class.error]="!password.valid &amp;&amp; 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”/>))也可能正常工作.

角 – EXCEPTION:模板解析错误:只有void和外部元素可以自己关闭“meta”的更多相关文章

  1. android – Build在debug中运行,在release中失败 – ZipException重复条目

    我正在将应用程序从2.3升级到Nougat(SDK25).当我添加com.android.support:appcompat-v7:25.0.0以支持ActivityCompat.requestPermissions时.当我在调试模式下运行它时,应用程序运行没有问题,但使用./gradlewassembleDebug运行会导致以下错误:当我在调试模式下运行时,应用程序构建没有问题,但是,当我尝试构

  2. android – 在interactivemedia中的APK error_prone / Annotations.gwt.xml中复制的重复文件

    错误:任务’:app:transformResourcesWithMergeJavaResForDevDebug’的执行失败.com.android.build.api.transform.TransformException:com.android.builder.packaging.DuplicateFileException:DuplicatefilescopiedinAPKerror_pr

  3. android – Gradle构建时在APK META-INF中复制的重复文件

    或者我可能已经排除了太多文件–我是否应该省略其中的一些行,如果是这样的话?我也尝试将依赖项移到顶部,在Android之上无济于事.此外,我对这些帖子中给出的一些建议感到有些困惑.Exclude和PickFirst之间的操作区别是什么?

  4. 无法使用Android Studio 1.2和Gradle 1.2.2加载类OutputFileTask

    我遇到了旧dexguard版本的问题.自从我更新到6.1.19后就不再有问题了.

  5. Instabug for Android构建警告

    我们有一个包含4个模块的gradle项目:1个库模块和3个Android应用程序.要构建我们的应用程序,我们使用circleCI.我们还在this指南之后禁用了circleCI构建的预定义.在我将Instabug添加到我们的一个项目之前,一切都很棒.从那以后,我们一直在达到circleCI4GB的限制.最重要的是,将Instabug作为依赖项的项目将启动preDexgradle任务,无论如何.要启

  6. DexArchiveMergerException:无法合并dex – Android Studio 3.0 Stable

    我做了:>在“设置”–>“AndroidSDK”–>“SDK工具”中检查并安装GooglePlay服务v.46>删除文件夹/.gradle>“清洁工程”>“重建项目”错误是:这是命令gradlew-qapp:dependencies>>app_dependencies.txt的输出运行命令后gradle:app:assembleDebug–stacktrace我明白了:我的项目gradle文件:文

  7. Angular2 PrimeNG分页模块学习

    这篇文章主要为大家详细介绍了Angular2 PrimeNG分页模块学习教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. Angular 2父子组件数据传递之@ViewChild获取子组件详解

    这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@ViewChild获取子组件的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定参考学习价值,需要的朋友们下面来一起看看吧。

  9. angular2中使用第三方js库的实例

    下面小编就为大家分享一篇angular2中使用第三方js库的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  10. iframe在移动端的缩放的示例代码

    这篇文章主要介绍了iframe在移动端的缩放的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部