AppComponent html在路线“ /”处加载了两次

Question

AppComponent html在路线“ /”处加载了两次

在路线“（主页）上，我的AppComponent的html加载了两次。

主要

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode, NgModule } from '@angular/core';
import { AppComponent } from './app/components/app/app.component';
import { APP_ROUTER_PROVIDERS } from './app/components/app/app.routing';

if (true) {
  enableProdMode();
}

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

Run Code Online (Sandbox Code Playgroud)

应用程序路由

import { Routes, RouterModule, provideRouter } from '@angular/router';
import { AuthComponent } from "../auth/auth.component";
import { AppComponent } from "./app.component"

const appRoutes: Routes = [
  {
    path: 'auth',
    component: AuthComponent
  },
  {
    path: '',
    component: AppComponent
  }
];

export const APP_ROUTER_PROVIDERS = [provideRouter(appRoutes)];

Run Code Online (Sandbox Code Playgroud)

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-component',
    templateUrl : './app/components/app/app.component.html'
})

export class AppComponent{

}

Run Code Online (Sandbox Code Playgroud)

我的index.html文件

<!doctype html>
<html>
<head>
  <base href="/">
  <meta charset="utf-8">

  {{#unless environment.production}}
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  {{/unless}}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-component>Loading</app-component>


    {{#each scripts.polyfills}}
    <script src="{{.}}"></script>
    {{/each}}
    <script>
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));
    </script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果我从路由表html删除路由''加载一次，但出现异常：

未捕获（承诺）：错误：无法匹配任何路线：”

Answer 1

Ter*_*rje 5

您正在引导AppComponent并将其作为“默认”（'/'）路径。通常，自举组件包含“母版页”（网页的固定部分），而路由中定义的路径进入router outlet。因此，如果您使用其他组件进行引导，则它应该可以按预期工作。

归档时间：	9 年，3 月前
查看次数：	2296 次
最近记录：	8 年，2 月前