Angular2渲染应用程序2次答案

【问题标题】：Angular2 render app 2 timesAngular2渲染应用程序2次
【发布时间】：2016-10-08 18:10:47
【问题描述】：

我有一个问题，我无法进入 Angular 2 中的路由。Mb 有人喜欢类似的东西吗？

所以，我的应用以一种奇怪的方式呈现：

<my-app><div> <app-nav-bar _nghost-ile-2=""><ul _ngcontent-ile-2=""> <!--template bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object]"
}--><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: left;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" ng-reflect-href="/" href="/">Home</a> </li><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: left;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" ng-reflect-href="/index/books" href="/index/books">Books</a> </li><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: right;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" class="active" ng-reflect-href="/index/about" href="/index/about">About</a> </li><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: right;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" ng-reflect-href="/" href="/">Login</a> </li> </ul> </app-nav-bar> <router-outlet></router-outlet><app-hello _nghost-ile-4="">
<html _ngcontent-ile-4="">
<head _ngcontent-ile-4="">
  <link _ngcontent-ile-4="" class="__meteor-css__" href="/merged-stylesheets.css?hash=d42394b95cde74014bba42c21ff2737c29b8fc61" rel="stylesheet" type="text/css">
    <base _ngcontent-ile-4="" href="/">
</head>
<body _ngcontent-ile-4="">
  <my-app _ngcontent-ile-4="">Loading....</my-app>
</body>
</html>
</app-hello> </div> </my-app>

如你所见，my-app>(app-nav-bar+app-hello)>html>(head+body) 等..

文件 main.ts：

import { bootstrap } from 'angular2-meteor-auto-bootstrap';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import {APP_ROUTER_PROVIDERS} from './app.routes'

import { AppComponent } from './app.component';

bootstrap(AppComponent, [
    disableDeprecatedForms(),
    provideForms(),
    APP_ROUTER_PROVIDERS
]);

文件 app.routes.ts

import {

RouterConfig, provideRouter } from '@angular/router';

import {
    HelloComponent
} from './imports/index'

const routes: RouterConfig = [
    { path: '', component: HelloComponent }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

文件 app.component.html：

<div>
    <app-nav-bar></app-nav-bar>
    <router-outlet></router-outlet>
</div>

文件索引.html：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <base href="/">
    <meta viewport>
</head>
<body>
<my-app>Loading....</my-app>
</body>

如果有人可以帮助我，我会很高兴=)

【问题讨论】：

标签： meteor angular

【解决方案1】：

我不确定这是否是正确的答案，但看起来我错过了包，它允许我直接使用静态模板。所以，替换

import template from 'ex.controller.html'

@Component({
...
template,
...
})

有了这个

@Component({
...
template: 'ex.controller.html',
...
})

删除的导入帮助很大。

【讨论】：