web-dev-qa-db-ja.com

Angular 2 Routingの新しいページにリダイレクトします

Home Page（app.component.ts with main.html）というシナリオがあり、これはデフォルトとしてルーティングされます

app.component.ts

@RouteConfig([
    {path: '/',name : 'Home' , component : HomeComponent , useAsDefault: true },
    {path: '/user', name : 'User' , component : UserComponent },
    {path: '/about', name : 'About' , component : AboutComponent},
    {path : 'contact', name : 'Contact' , component : ContactComponent}
])

main.html

<a [routerLink]="['/Home']">Home</a>
<a [routerLink]="['/User']">User Login</a>
<a [routerLink]="['/About']">About</a>
<a [routerLink]="['/Contact']">Contact</a>

<router-outlet></router-outlet>

ここで、ルーターアウトレットを使用してルーティングする2つのコンポーネントについて、ユーザーについては、ルーターアウトレットではなく新しいページ全体にルーティングするようにしたいとします。 navigateを試しましたが、navigateByUrlは動作しません。それでも<router-outlet>。提案しないでくださいwindow.href

私は、angular2/routerでRedirectクラスを使用しようとしましたが、必要なことはできませんでした。

routingangularangular2-routing
8
Pratik Kelwalkar

更新：この回答のルーター構成コード全体は、2016年6月頃に廃止され削除されたルーター用です

あなたが欲しいのは子ルートだと思う- Plunker を参照

Plunker を更新し、ナビゲーションがPage1に移動しました

親ルートはPage1とPage2の間の切り替えを許可し、Page1はAboutとContactの間の切り替えを許可し、Page2のみがUser。

Page2を直接UserComponentにすることもできますが、このページが複数のコンポーネントをサポートする必要がある場合にのみ、子ルートを持つコンポーネントにする必要があります。

もちろん、UserとAboutの間をナビゲートできます。

router.navigate(['/Page1', 'About']);
router.navigate(['/Page2', 'User']);

import {Component, Directive, Output, EventEmitter} from 'angular2/core'
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';

@Component({
  selector: 'contact',
  directives: [],
  template: `
  <h2>contact</h2>
`
})
export class ContactComponent {
}

@Component({
  selector: 'about',
  directives: [],
  template: `
  <h2>about</h2>
`
})
export class AboutComponent {
}

@Component({
  selector: 'user',
  directives: [],
  template: `
  <h2>user</h2>
`
})
export class UserComponent {
}

@Component({
  selector: 'page1',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>page1</h2>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/about', name : 'About' , component : AboutComponent, useAsDefault: true},
    {path : '/contact', name : 'Contact' , component : ContactComponent}
])
export class Page1 {
}

@Component({
  selector: 'page2',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>page2</h2>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/user', name : 'User' , component : UserComponent, useAsDefault: true},
])
export class Page2 {
}

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>Hello {{name}}</h2>
  <a href="#" [routerLink]="['/Page1','About']">About</a>
  <a href="#" [routerLink]="['/Page1','Contact']">Contact</a>
  <a href="#" [routerLink]="['/Page2','User']">User</a>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/page1/...',name : 'Page1' , component : Page1 , useAsDefault: true },
    {path: '/page2/...', name : 'Page2' , component : Page2 },
])
export class App {
  constructor() {
    this.name = 'Angular2';
  }  
}
6
Günter Zöchbauer

簡単な解決策は、UIコードが記述されているhtmlで使用するのではなく、app.component.htmlでrouter-outletを使用することです。これにより、元のページの下に新しいページが入るのを防ぎます。 app.component.htmlにコードを記述していないことを確認してください

たとえば、メインのhtmlコードがhome.component.htmlに記述されていて、connections.component.htmlページにルーティングする必要がある場合、次のようにできます。

index.html：

<app-root></app-root> //これにより、インデックスからアプリコンポーネントにルーティングされます。

app.component.html：

<router-outlet></router-outlet> //これにより、app.component.html home.component.htmlに新しいページコードがロードされます。

<a routerLink =['/connection'] > Add connection </a> // connection.htmlへのルート。home.component.htmlにrouter-outletを記述する必要はありません。

1
pujitha

ボタンをクリックした後、新しいページに移動しなければならないという同様の要件がありました。コンポーネントtrainer、admin、trainee、footer、header、loginがあるとします。

私たちのAppcomponentには

<header></header>
<login></login>
<router-outlet></router-outlet>
<footer></footer>

ログイン後に新しいページにルーティングすると、新しいページが表示されますが、元のログインページはまだそこにあり、新しいページはそのログインページの下に表示されます。

<router-outlet></router-outlet>

appcomponentのテンプレート。この問題を取り除くために、<header></header>および<footer></footer>各ページの最初と最後。 Appcomponentには、

<router-outlet></router-outlet>.

そのため、新しいページにルーティングすると、ページ全体が占有されます。

0
Santosh Kadam