Question

我有一个问题，我不能在Angular 2中进行路由。某人有类似的东西吗？

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

<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＆gt;（app-nav-bar + app-hello）＆gt; html＆gt;（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>

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

如果有人可以帮助我，我会非常高兴=）

Answer 1

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

import template from 'ex.controller.html'

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

有了这个

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

删除导入有很大帮助。

Angular2渲染应用程序2次

1 个答案: