Angular outlet实现页面布局示例详解

ng new outlet-demo

ng generate component layout
ng generate component home
ng generate component about

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<div>
  <h1>Angular Outlet示例</h1>
  <nav>
    <a routerLink="/">首页</a>
    <a routerLink="/about">关于我们</a>
  </nav>
  <hr>
  <router-outlet></router-outlet>
</div>

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

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class LayoutComponent {
}

ng serve

<!-- 在布局组件中定义多个Outlet -->
<router-outlet></router-outlet> <!-- 默认Outlet -->
<router
-outlet name="sidebar"></router-outlet> <!-- 命名Outlet -->
<!-- 在路由配置中指定Outlet -->
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent, outlet: 'sidebar' },
];

<!-- 父组件的模板中 -->
<div>
  <h1>父组件</h1>
  <router-outlet></router-outlet> <!-- 加载子组件 -->
</div>
<!-- 路由配置中定义子路由 -->
const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child', component: ChildComponent }
    ]
  }
];

// 在路由配置中定义参数和数据
const routes: Routes = [
  { path: 'product/:id', component: ProductComponent, data: { title: 'Product Detail' } },
];
// 在组件中访问路由参数和数据
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {
  this.route.params.subscribe(params => {
    console.log('Route parameters:', params);
  });
  this.route.data.subscribe(data => {
    console.log('Route data:', data);
  });
}

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 进行身份验证或权限检查
    if (userIsAuthenticated) {
      return true;
    } else {
      // 未通过验证，重定向到登录页
      this.router.navigate(['/login']);
      return false;
    }
  }
}

const dynamicRoutes: Routes = [
  { path: 'dynamic/:id', component: DynamicComponent },
];
// 在运行时添加动态路由
constructor(private router: Router) {
  const newRoute: Route = { path: 'new-route', component: NewComponent };
  this.router.config.unshift(newRoute);
}