Angular의 경로 라우팅에 대한 자세한 설명

이 기사에서는 Angular의 라우팅을 안내합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular Route (Route)

라우터를 전체 애플리케이션의 상태를 제어하는 ​​뷰 개체로 이해할 수 있습니다. 라우터의 또 다른 기능은 고유한 URL을 할당하는 것입니다. 각 보기에서 이 URL을 사용하여 애플리케이션 간의 특정 보기 상태로 이동할 수 있습니다. 단일 페이지 애플리케이션은 실제로 보기 상태의 모음입니다.

추천 튜토리얼: "angular Tutorial"

단일 페이지 애플리케이션(SPA)

단일 페이지 애플리케이션은 메인 페이지가 한 번만 로드되고 반복적으로 새로 고쳐지지 않고 페이지의 일부만 변경하는 애플리케이션입니다. 페이지의 내용. Angular 애플리케이션은 페이지를 다시 로드하지 않고 사용자 작업에 따라 페이지 내용을 변경하기 위해 Angular의 라우터를 사용하는 단일 페이지 애플리케이션입니다. 단일 페이지 애플리케이션은 뷰 상태의 모음으로 이해될 수 있습니다.

Routing object

Routes Routing Array

라우터는 라우팅 정보를 갖기 전에 먼저 구성해야 하며 RouterModule.forRoot 메소드를 사용하여 라우터를 구성해야 합니다. 브라우저의 URL이 변경되면 라우터는 해당 경로를 조회하고 이를 기반으로 표시할 구성 요소를 결정합니다.
기본 구성:

const appRoutes: Routes = [
  { path: 'common/a', component: AComponent },
  { path: 'common/b/:id', component: BComponent },
  { path: '**', component: NotFoundComponent}, // 定义通配符路由
];

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

RouterOutlet RouterOutlet

RouterOutlet은 라우팅 모듈의 지시어이며 사용법은 구성 요소와 유사합니다. 이는 라우터가 이 콘센트에 표시할 구성 요소를 표시할 템플릿의 위치를 ​​표시하는 자리 표시자 역할을 합니다.

 <h1 id="组件的内容显示在-Angular의-경로-라우팅에-대한-자세한-설명-outlet-下方">组件的内容显示在（Angular의 경로 라우팅에 대한 자세한 설명-outlet）下方</h1>
 <angular></angular>의 경로 라우팅에 대한 자세한 설명-outlet>

Router Router

라우터 개체를 사용하여 탐색하세요.

constructor(private Angular의 경로 라우팅에 대한 자세한 설명: Router) {}

toAComponent() {
    this.Angular의 경로 라우팅에 대한 자세한 설명.navigate(['/common/a']);
    // 或 this.Angular의 경로 라우팅에 대한 자세한 설명.navigateUrl('common/a');
}

RouterLink 라우터 링크

경로 링크 URL은 '/'로 시작해야 합니다.

<a [Angular의 경로 라우팅에 대한 자세한 설명Link]="[&#39;/&#39;]">主页</a>
<a [Angular의 경로 라우팅에 대한 자세한 설명Link]="[&#39;/common/b&#39;, id]">B组件</a>
<Angular의 경로 라우팅에 대한 자세한 설명-outlet></Angular의 경로 라우팅에 대한 자세한 설명-outlet>

ActivatedRoute Activated Route

현재 활성화된 경로의 경로와 매개변수는 ActivateRoute의 라우팅 서비스를 통해 얻을 수 있습니다.

• 일반적으로 사용되는 속성:

  Attributes	Description
  url	라우팅 경로의 Observable 객체는 라우팅 경로의 다양한 부분으로 구성된 문자열 배열입니다.
  data	경로에 제공되는 데이터 객체를 포함하는 Observable입니다. 또한 리졸브 가드에 의해 해결된 값도 포함됩니다.
  paramMap	현재 경로의 필수 및 선택적 매개변수로 구성된 지도 객체가 포함된 Observable입니다. 이 맵을 사용하여 동일한 이름을 가진 매개변수에서 단일 값 또는 여러 값을 가져옵니다.
  queryParamMap	모든 경로에 유효한 쿼리 매개변수의 지도 객체를 포함하는 Observable입니다. 쿼리 매개변수에서 단일 값 또는 여러 값을 가져오려면 이 맵을 사용하세요.

在路由时传递数据

• 在查询参数中传递数据

/common/b?id=1&name=2 => ActivatedRoute.queryParamMap

• 在路由路径中传递数据

{path: /common/b/:id} => /commo/b/1 => ActivatedRoute.paramMap

• 在路由配置中传递数据

{path: /common/b, component: BComponent, data: {id:“1”, title: “b”}}

• 示例

constructor(
    private activatedRoute: ActivatedRoute
) { }

ngOnInit() {
   // 从参数中获取
    this.activatedRoute.queryParamMap.subscribe(params => {
      this.id = params.get('id');
    });

   // 或
  // this.activated.snapshot.queryParamMap.get('id');

    // 从路径中获取
    this.activatedRoute.paramMap.subscribe(params => {
      this.id = params.get('id');
    });

    this.activatedRoute.data.subscribe(({id,title}) => {

    });
}

snapshot: 参数快照，是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后，不会监听路由信息的变化。如果确定一个组件不会从自身路由到自身的话，可以使用参数快照。

subscribe: 参数订阅，相当于一个监听器，会监听路由信息的变化。

重定向路由

在用户访问一个特定的地址时，将其重定向到另一个指定的地址。
配置重定向路由：

// 当访问根路径时会重定向到 home 路径
const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent}
];

子路由

子路由配置语法：

const appRoutes: Routes = [
  { 
    path: 'home', 
    component: HomeComponent,
    children: [
      { path: '', component: AComponent},
      { path: 'b', component: BComponent}
    ]
  },
];

辅助路由

辅助路由又兄弟路由，配置语法：

// 路由配置
{path: 'xxx', component: XxxComponent, outlet:'xxxlet'},
{path: 'yyy', component: XxxComponent, outlet:'yyylet'}

// 使用
<Angular의 경로 라우팅에 대한 자세한 설명-outlet></Angular의 경로 라우팅에 대한 자세한 설명-outlet>
<Angular의 경로 라우팅에 대한 자세한 설명-outlet name="xxxlet"></Angular의 경로 라우팅에 대한 자세한 설명-outlet>

// 链接
<a [Angular의 경로 라우팅에 대한 자세한 설명Link]="[&#39;/home&#39;,{outlets:{xxxlet: &#39;xxx&#39;}}]">Xxx</a>

当点击Xxx链接时，主插座会显示’/home’链接所对应的组件，而xxxlet插座会显示xxx对应的组件。

路由守卫（guard）

CanActivate/CanActiveChild：处理导航到某路由的情况

当用户不满足这个守卫的要求时就不能到达指定路由。

export class DemoGuard1 implements CanActivate {

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    ...
    return true;
  }
}

CanDeactivate：处理从当前路由离开的情况

如果不满足这个守卫的要求就不能离开该路由。

// 泛型中 AComponent 代表要守卫的组件。
export class DemoGuard2 implements CanDeactivate<AComponent> {
 canDeactivate(component: AComponent): boolean {
   // 根据 component 的信息进行具体操作
   retturn true;
 }
}

Resolve：在路由激活之前获取路由数据

在进入路由时就可以立刻把数据呈现给用户。

@Injectable()
export AResolve implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const id = route.paramMap.get(&#39;id&#39;);
     // 可以根据路由中的信息进行相关操作
  }
}

最后，需要将路由守卫添加到路由配置中：

const appRoutes: Routes = [
  { 
    path: 'common/a', 
    component: AComponent,
    canActivate: [DemoGurad1],
    canDeactivate: [DemoGuard2],
    resolve: {data: AResolve}
   },
  { path: 'common/b/:id', component: BComponent },
  { path: '**', component: NotFoundComponent}, // 定义通配符路由
];

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

更多编程相关知识，请访问：编程入门！！

위 내용은 Angular의 경로 라우팅에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!