web-dev-qa-db-ja.com

angular 6？で他のページに移動する方法

ログインから別のページにページをリダイレクトしようとしています。このコードをフォローしています。

ログインコンポーネントのtsファイル：

import { Router } from '@angular/router';

constructor(private router: Router) {
}

funLogin(mobilenumber){
    this.router.navigateByUrl('registration');
}

私のhtml Imでは、submit btnでこの関数を呼び出していますが、

<button class="common-btn btn" (click)="funLogin(mobileNo.value)">Submit</button>

In my app.login.routing file,
 export const loginRouting: Routes = [
{
 path: '', component: DashboardRootComponent, canActivateChild: [],
    children: [
        { path: '', component: DashboardComponent, pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'registration', component: RegistrationComponent },
    ]
   }
  ]

「this.router.navigate」とリンクの参照スロットで試しました。しかし、うまくいきませんでした。誰が私がどこに間違っているのか教えてくれますか？.

htmlangularurlroutingangular6
6
sasi

@sasi ..このようにしてみて、

 <a routerLink="/registration"><button class="btn btn-success" > Submit </button></a>

更新：

アプリケーションでルーティングを使用するには、ビューをレンダリングするためにangularルーターを許可するコンポーネントを登録する必要があります。

特定のコンポーネントビューにルーティングするために、App ModuleまたはそのFeature Module（現在の作業モジュール）にコンポーネントを登録する必要があります。

2つの方法でコンポーネントを登録できます

  1. .forRoot(appRoutes)root levelで登録するfeatuteModules（ex。UserManagement）やcomponentsなどのアプリレベルのコンポーネント登録の場合.

  2. .forChild(featureRoutes) 機能モジュールの場合child components（例：UserDelete、UserUpdate）。

    以下のようなものを登録できます

      const appRoutes: Routes = [
      { path: 'user', loadChildren: './user/user.module#UserModule' },
      { path: 'heroes', component: HeroListComponent },
   ];

  @NgModule({
    imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes
    )
  ],

PS：あるコンポーネントから別のコンポーネントにナビゲートするには、RouterModuleを対応するModule Imports配列に@angular/routerパッケージ。

Angularでは2つの方法で別のページにナビゲートできます。両方ともラッパーレベルで同じですが、実装はサイドビットdiffからです。）

routerLinkディレクティブ

routerLinkディレクティブは、RouterクラスのnavigateByUrl()のような絶対パス一致を提供します。

 <a [routerLink]=['/registration']><button class="btn btn-success" > Submit </button></a>

dynamic valuesを使用してリンクを生成する場合、パスセグメントのarrayを渡し、その後に各セグメントにparamsを続けて渡すことができます。

たとえば、routerLink=['/team', teamId, 'user', userName, {details: true}]は、 /team/11/user/bob;details=true へのリンクを生成することを意味します。

routerLinkを使用している場合、覚えておくと便利な点がいくつかあります。

  • 最初のセグメントが/で始まる場合、ルーターはアプリのルートからルートを検索します。
  • 最初のセグメントが./で始まるか、スラッシュで始まらない場合、ルーターは現在アクティブ化されているルートの子を探します。
  • そして、最初のセグメントが../で始まる場合、ルーターは1レベル上がります。

詳細はこちらをご覧ください。routerLink

ルータークラス

メソッドを使用するには、コンポーネントにRouterクラスを挿入する必要があります。

navigate()、navigateByUrl()、その他のようにナビゲートするメソッドは3つ以上ありますが、ほとんどこれら2つを使用します。

  1. navigate() ：

    提供されたコマンドの配列と開始点に基づいてナビゲートします。開始ルートが指定されていない場合、ナビゲーションは絶対です。

     this.route.navigate(['/team/113/user/ganesh']);

    navigate()コマンドは、既存のURLに最新の文字列を追加します。以下のように、このメソッドからqueryParamsを解析することもできます。

     this.router.navigate(['/team/'], {
    queryParams: { userId: this.userId, userName: this.userName }
 });

    これらの値は、ナビゲートされたコンポーネントでActivatedRouteで取得できます。 paramMap 、 snapshot(no-observable alternative) の詳細を確認できます。

  2. navigateByUrl()

    絶対URLでなければならない、提供されたURLに基​​づいてナビゲートします。

     this.route.navigateByUrl(['/team/113/user/ganesh']);

    navigateByUrl()は、ロケーションバーを直接変更することに似ています。新しいURLを提供していますwhole。

8
ganesh045

私はangular 7を使用していますが、この方法でプロジェクトに解決しました。

1.最初に、このモジュールをapp.module.tsファイルに実装する必要があります

import { AppRoutingModule} from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({

  imports: [
    BrowserModule,
    AppRoutingModule, 
    FormsModule,
  ],

})

2.次に、your.component.htmlファイルを開き、目的の場所に移動するためのメソッドを起動します

<button class="btn btn-primary" (click)="gotoHome()">Home</button>

3.次に、移動したい場所のyour.component.tsファイルに移動します。そして、このコードをそこに追加します。

import { Router } from '@angular/router';

export class YourComponentClassName implements OnInit {

    constructor(private router: Router) {}

    gotoHome(){
        this.router.navigate(['/home']);  // define your component where you want to go
    }

}

4.そして最後に、あなたがapp-routing.module.tsの世話をするように注意することを言いたいです。私の場合。

const routes: Routes = [
  { path:'', component:LoginComponent},
  { path: 'home', component:HomeComponent },  // you must add your component here
  { path: '**', component:PageNotFoundComponent }
];

ありがとう、私はこのルーティングセクションのすべてのケースを共有します。ハッピーコーディング!!!

10
MD.JULHAS HOSSAIN

navigateByUrlは絶対パスを想定しているため、先頭の/で正しいページに移動できます

また、navigateを使用することもできますが、先頭の/は必要ありませんが、パスの配列を想定しているため、構文は少し異なります

https://angular.io/api/router/Router#navigateByUrl

1
Raj Sappidi
<a class="nav-link mt-1" [routerLink]="['/login']"><i class="fa fa-sign-in"></i>&nbsp;&nbsp;Login</a>
0
Vinodh Ram