Angular2渲染应用程序2次

Question

I have a problem, i can`t get into routing in Angular 2. Mb someone fased with something similar? 我有一个问题，我无法进入Angular 2中的路由。

So, my app renders in a weird way: 因此，我的应用程序以一种奇怪的方式呈现：

<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>

As you can see, my-app>(app-nav-bar+app-hello)>html>(head+body) etc.. 如您所见，my-app>（app-nav-bar + app-hello）> html>（head + body）等。

File main.ts: 文件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
]);

File app.routes.ts 档案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)
];

File app.component.html: 文件app.component.html：

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

File index.html: 文件index.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>

If someone can help me, i will be very happy =) 如果有人可以帮助我，我会很高兴=）

Answer 1

I am not sure if it is the right answer, but looks like i missed package, that allows me to use static template directly. 我不确定这是否是正确的答案，但看起来像是我错过了包装，使我可以直接使用静态模板。 So, replacing 因此，更换

import template from 'ex.controller.html'

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

With this 有了这个

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

And deleted import helped a heavily. 删除导入的功能极大。

Angular2渲染应用程序2次

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-10-08 10:10:47

Angular2渲染应用程序2次

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-10-08 10:10:47

解决方案1
0 已采纳 2016-10-08 10:10:47