Question

我是Angular5的新用户，我正在尝试在我的主页中使用路由器插座。我想要实现的是当你点击＆＃34; Sample＆＃34;链接，sample.component的html应该放在router-outlet所在的位置。就我而言，当我点击＆＃34; Sample＆＃34;链接它创建一个单独的示例页面。有了它，我认为routes.ts正在工作，因为它可以找到sample.component的html。它没有放在路由器插座上。如果我能做到这一点，那就意味着我可以用不同的component.html更改路由器插座。谢谢。

home.component.hml

<div class="container">


<nav class="#37474f blue-grey darken-3">
    <div class="nav-wrapper">
      <a style="padding-left: 1em;" class="brand-logo ">
        <i class="material-icons">cloud</i>
        LOGO</a>
      <a href="javascript:void(0);" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a (click)="Logout()">Logout</a></li>
        <li><a routerLink="/sample"  routerLinkActive='active'>Sample 1</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="#">Logout</a></li>
        <li><a href="#">Sample 1</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
      </ul>
    </div>
  </nav>

  <div class="row" *ngIf="userClaims">
    <div class="col s12 m6">
      <div class="card #37474f blue-grey darken-3">
        <div class="card-content white-text">
            <router-outlet></router-outlet>
        </div>
        <div class="card-action">
          <span class="card-title">User Details</span><br>
          <span>Username: {{userClaims.UserName}}</span><br>
          <span>Full Name: {{userClaims.FirstName}} {{userClaims.LastName}}</span><br>
          <span>Email: {{userClaims.Email}}</span><br>
          <span>Is Active: {{userClaims.IsValid}}</span><br>
          <span>Log-in Time: {{userClaims.LoggedOn}}</span>

          <!-- <a href="#">This is a link</a>
          <a href="#">This is a link</a> -->
        </div>
      </div>
    </div>
  </div>

</div><!-- container -->

routes.ts

import { SampleComponent } from './home/sample/sample.component';
import { AuthGuard } from './auth/auth.guard';
import { SignUpComponent } from './user/sign-up/sign-up.component';
import { SignInComponent } from './user/sign-in/sign-in.component';
import { UserComponent } from './user/user.component';
import { HomeComponent } from './home/home.component';
import { Routes } from '@angular/router';

export const appRoutes: Routes = [
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
    {
        path: 'signup', component: UserComponent,
        children: [{ path: '', component: SignUpComponent }]
    },
    {
        path: 'signin', component: UserComponent,
        children: [{ path: '', component: SignInComponent }]
    },
    { path: 'sample', component: SampleComponent, canActivate: [AuthGuard] },
    { path: '', redirectTo:'/signin', pathMatch: 'full'}
];

Answer 1

我刚刚将routes.ts更改为：

{ 
    path: 'home', component: HomeComponent, canActivate: [AuthGuard]
},
{ 
    path: 'sample', component: HomeComponent, canActivate: [AuthGuard], 
    children: [{ path: '', component: SampleComponent }]
},
{ 
    path: 'sample1', component: HomeComponent, canActivate: [AuthGuard], 
    children: [{ path: '', component: Sample1Component }]
},
{
    path: 'signup', component: UserComponent,
    children: [{ path: '', component: SignUpComponent }]
},
{
    path: 'signin', component: UserComponent,
    children: [{ path: '', component: SignInComponent }]
},
{ path: '', redirectTo:'/signin', pathMatch: 'full'}

无法将组件放在路由器插座中

1 个答案: