路线正在加载两个组件，我看不到错误

Question

我对angular还是很陌生，我不确定在出现语法错误或缺少某些步骤时是否总是不确定。

待办事项

import { transition , keyframes, style, animate, trigger } from '@angular/animations';
import { Component} from '@angular/core';

@Component({
  selector: 'app-to-do',
  templateUrl: './to-do.component.html',
  styleUrls: ['./to-do.component.scss'],
  animations: [
    trigger('moveInLeft', [
       transition('void=> *', [style({transform: 'translateX(300px)'}),
         animate(200, keyframes([
          style({transform: ' translateX(300px)'}),
          style({transform: ' translateX(0)'})

           ]))]),


           transition('*=>void', [style({transform: 'translateX(0px)'}),
         animate(100, keyframes([
          style({transform: 'translateX(0px)'}),
          style({transform: 'translateX(300px)'})

           ]))])

      ])

   ]
})
export class ToDoComponent {

  todoArray = [];
  todo;

addTodo(value) {
    if (value !== '') {
     this.todoArray.push(value);

  } else {
    alert('Field required **');
  }

  }
/*delete item*/
  deleteItem(todo) {
   for (let i = 0 ; i <= this.todoArray.length ; i++) {
    if (todo === this.todoArray[i]) {
     this.todoArray.splice(i, 1);
    }
   }
  }
// submit Form
  todoSubmit(value: any) {
     if ( value !== '') {
    this.todoArray.push(value.todo);
    } else {
      alert('Field required **');
    }

  }
}

To-Do.Module

import { FormsModule } from '@angular/forms';
import { ToDoComponent } from './to-do.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


@NgModule({
  declarations: [ToDoComponent],
  imports: [

    FormsModule
  ]
})
export class ToDoModule { }

App.Routing

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// Import Containers
import { DefaultLayoutComponent } from './containers';
import {DashbTwoComponent} from '../app/controllers/dashboard2/dashboard2.component';
import { P404Component } from './views/error/404.component';
import { P500Component } from './views/error/500.component';
import { LoginComponent } from './views/login/login.component';
import { RegisterComponent } from './views/register/register.component';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',


  },
  {
    path: '404',
    component: P404Component,
    data: {
      title: 'Page 404'
    }
  },

  {
    path: 'login',
    component: LoginComponent,
    data: {
      title: 'Login Page'
    }
  },
  {
    path: 'register',
    component: RegisterComponent,
    data: {
      title: 'Register Page'
    }
  },

  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
    {
        path: 'dashboard',
        loadChildren: './views/dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'notifications',
        loadChildren: './views/notifications/notifications.module#NotificationsModule'
      },
      {
        path: 'theme',
        loadChildren: './views/theme/theme.module#ThemeModule'
      },
      {
        path: 'widgets',
        loadChildren: './views/widgets/widgets.module#WidgetsModule'
      },
      {
          path: 'Dashtwo',
          loadChildren: '../app/controllers/dashboard2/DashTwo.module#DashboardtwoModule'
      },
      {
          path: 'ToDo',
          loadChildren: '../app/to-do/to-do.module#ToDoModule'
      },

    ]
  },


  { path: '**', component: P404Component }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {
}

导航

interface NavAttributes {
  [propName: string]: any;
}
interface NavWrapper {
  attributes: NavAttributes;
  element: string;
}
interface NavBadge {
  text: string;
  variant: string;
}
interface NavLabel {
  class?: string;
  variant: string;
}

export interface NavData {
  name?: string;
  url?: string;
  icon?: string;
  badge?: NavBadge;
  title?: boolean;
  children?: NavData[];
  variant?: string;
  attributes?: NavAttributes;
  divider?: boolean;
  class?: string;
  label?: NavLabel;
  wrapper?: NavWrapper;
}

export const navItems: NavData[] = [
  {
    name: 'Dashboard',
    url: '/dashboard',
    icon: 'icon-speedometer',
    badge: {
      variant: 'info',
      text: 'NEW'
    }
  },

  {
    name: 'Pages',
    url: '/pages',
    icon: 'icon-star',
    children: [
      {
        name: 'Login',
        url: '/login',
        icon: 'icon-star'
      },
      {
        name: 'Register',
        url: '/register',
        icon: 'icon-star'
      },
    ]
  },
  {
    divider: true
  },
  {
    name: 'ToDo',
    url: '/ToDo',
    icon: 'icon-star'
  },
  {
    divider: true
  },
  {
    name: 'Dashboard2',
    url: '/Dashtwo',
    icon: 'icon-star'
  }

];

我正在尝试将nav.ts从我的仪表板路由到to-do.component 但它同时路由到我，我在StyleTemplate中检查了待办事项，没有我认为正在发生的路由器出口，有很多不同的路由方式，但我并不总是确定它如何工作，我想也感谢链接，以便我可以正确地学习路由器。非常感谢

Update My Index.html为空，我用模板填充它。 这是我的To-Do.html

<div class="container">
  <form #todoForm = "ngForm" (submit)="todoSubmit(todo.value); todoForm.resetForm()">
   <div class="form-group">
   <h1 class="text-center ">Todo App</h1>
    <div class="input-group-prepend">
        <input type="text" #todo  class="form-control" placeholder="Add Todo" name="todo" ngModel>
     <span class="input-group-text" (click)="addTodo(todo.value)">
     <i class="material-icons">add</i></span>
    </div>
   </div>
   <div class="data">
   <ul class="list-unstyled">
    <li [@moveInLeft]  *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>
   </ul>
  </div>
  </form>
 </div>

少量的仪表板HTML提示一个想法

<div class="animated fadeIn">
  <div class="row">
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-info">
        <div class="card-body pb-0">
          <button type="button" class="btn btn-transparent p-0 float-right">
            <i class="icon-location-pin"></i>
          </button>
          <div class="text-value">9.823</div>
          <div>Members online</div>
        </div>
        <div class="chart-wrapper mt-3 mx-3" style="height:70px;">
          <canvas baseChart class="chart"
          [datasets]="lineChart2Data"
          [labels]="lineChart2Labels"
          [options]="lineChart2Options"
          [colors]="lineChart2Colours"
          [legend]="lineChart2Legend"
          [chartType]="lineChart2Type"></canvas>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-primary">
        <div class="card-body pb-0">
          <div class="btn-group float-right" dropdown>
            <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
              <i class="icon-settings"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
          <div class="text-value">9.823</div>
          <div>Members online</div>
        </div>
        <div class="chart-wrapper mt-3 mx-3" style="height:70px;">
          <canvas baseChart class="chart"
                  [datasets]="lineChart1Data"
                  [labels]="lineChart1Labels"
                  [options]="lineChart1Options"
                  [colors]="lineChart1Colours"
                  [legend]="lineChart1Legend"
                  [chartType]="lineChart1Type"></canvas>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-warning">
        <div class="card-body pb-0">
          <div class="btn-group float-right" dropdown>
            <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
              <i class="icon-settings"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
          <div class="text-value">9.823</div>
          <div>Members online</div>
        </div>
        <div class="chart-wrapper mt-3" style="height:70px;">
          <canvas baseChart class="chart"
          [datasets]="lineChart3Data"
          [labels]="lineChart3Labels"
          [options]="lineChart3Options"
          [colors]="lineChart3Colours"
          [legend]="lineChart3Legend"
          [chartType]="lineChart3Type"></canvas>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-danger">
        <div class="card-body pb-0">
          <div class="btn-group float-right" dropdown>
            <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
              <i class="icon-settings"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
          <div class="text-value">9.823</div>
          <div>Members online</div>
        </div>
        <div class="chart-wrapper mt-3 mx-3" style="height:70px;">
          <canvas baseChart class="chart"
          [datasets]="barChart1Data"
          [labels]="barChart1Labels"
          [options]="barChart1Options"
          [colors]="barChart1Colours"
          [legend]="barChart1Legend"
          [chartType]="barChart1Type"></canvas>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->
  <div class="card">
    <div class="card-body">
      <div class="row">
        <div class="col-sm-5">
          <h4 class="card-title mb-0">Traffic</h4>
          <div class="small text-muted">November 2017</div>
        </div><!--/.col-->
        <div class="col-sm-7 d-none d-md-block">
          <button type="button" class="btn btn-primary float-right"><i class="icon-cloud-download"></i></button>
          <div class="btn-group btn-group-toggle float-right mr-3" data-toggle="buttons">
            <label class="btn btn-outline-secondary" [(ngModel)]="radioModel" btnRadio="Day" id="option1">Day</label>
            <label class="btn btn-outline-secondary" [(ngModel)]="radioModel" btnRadio="Month" id="option2">Month</label>
            <label class="btn btn-outline-secondary" [(ngModel)]="radioModel" btnRadio="Year" id="option3">Year</label>
          </div>
        </div><!--/.col-->
      </div><!--/.row-->
      <div class="chart-wrapper" style="height:300px;margin-top:40px;">
        <canvas baseChart class="chart"
        [datasets]="mainChartData"
        [labels]="mainChartLabels"
        [options]="mainChartOptions"
        [colors]="mainChartColours"
        [legend]="mainChartLegend"
        [chartType]="mainChartType"></canvas>
      </div>
    </div>
    <div class="card-footer">
      <div class="row text-center">
        <div class="col-sm-12 col-md mb-sm-2 mb-0">
          <div class="text-muted">Visits</div>
          <strong>29.703 Users (40%)</strong>
          <div class="progress progress-xs mt-2">
            <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        <div class="col-sm-12 col-md mb-sm-2 mb-0">
          <div class="text-muted">Unique</div>
          <strong>24.093 Users (20%)</strong>
          <div class="progress progress-xs mt-2">
            <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        <div class="col-sm-12 col-md mb-sm-2 mb-0">
          <div class="text-muted">Pageviews</div>
          <strong>78.706 Views (60%)</strong>
          <div class="progress progress-xs mt-2">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        <div class="col-sm-12 col-md mb-sm-2 mb-0">
          <div class="text-muted">New Users</div>
          <strong>22.123 Users (80%)</strong>
          <div class="progress progress-xs mt-2">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        <div class="col-sm-12 col-md mb-sm-2 mb-0">
          <div class="text-muted">Bounce Rate</div>
          <strong>40.15%</strong>
          <div class="progress progress-xs mt-2">
            <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

App.Component

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  // tslint:disable-next-line
  selector: 'body',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      window.scrollTo(0, 0);
    });
  }
}

Answer 1

一种实现方法是在router-outlet模块中提供ToDo。在我的项目中，每个延迟加载的功能模块都有自己的路由阵列（在这种情况下，我总是提供路由组件 －仅具有路由器出口的组件）。即使功能模块只有一条路线，我也会这样做，因为它会创建易于在您检查的任何模块中处理的开发模式（“ 该功能模块的路由模块和路由组件在哪里？“）。在该模块中，所有该模块上的子路由都被声明为子路由：

@Component({template: '<router-outlet></router-outlet>'})
export class TodoRoutingComponent {}

@NgModule({
  imports: [
     Router.forChild([
       path: ''
       component: TodoRoutingComponent,
       children: [
         {
            path: '', // => /toDo
            component: TodoListComponent,
         },
         {
            path: 'detail', // => /toDo/detail
            component: TodoDetailComponent,
         }
       ]
     ]),
  ]
})
export class TodoFeatureModule {...}