ログイン後、URLをAngular js（4.4.6）でナビゲートしたい

-2

import { Component } from '@angular/core'; 
import { Loginservice } from './services/login.service'; 
import { FormGroup, FormControl, Validators } from '@angular/forms'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector : 'app-login', 
    templateUrl : 'user-login.html', 
    styleUrls : ['styles/login-style.css'] 

}) 
export class UserLogin{ 

    public userDetail:any[]; 
    public islogin:boolean; 
    public routers : Router; 
    constructor(private service:Loginservice){ 

    } 
    loginform = new FormGroup({ 
     username : new FormControl('',[Validators.required, Validators.minLength(5)]), 
     password : new FormControl('',[Validators.required, Validators.minLength(5)]) 
    }); 

    get username(){ 
     return this.loginform.get('username'); 
    } 
    get password(){ 
     return this.loginform.get('password'); 
    } 

    getStyle(){ 
     return { 
      'font-size': '11px', 
      'text-align': 'center' 
     }; 
    } 

    authLogin(loginObj){ 

     let username = loginObj.value.username; 
     let password = loginObj.value.password; 
     let postdata = {'username':username, 'password':password}; 
     //console.log(postdata); 
     this.service.validateUser(postdata) 
        .subscribe(
         response => { 
          this.islogin= response.json().status=='1'?true:false; 
          //alert(this.islogin); 
          //console.log(response); 
          this.routers.navigate(['/register']); 
         }, 
         error =>{ 
          alert(error+"asdsadsa"); 
         } 

        ); 

    } 
}

これは私のコンポーネントのコードです。私はログインすると、共通のヘッダーとフッターを持つ別のコンポーネントに行きたいと思っています。どのコンポーネントにも渡されず、 "未定義のプロパティ 'navigate'を読み取ることができません。もう1つは、ログイン/登録を除く各コンポーネントに共通のヘッダーファイルとフッターファイルを追加する方法を知りたいということです。ログイン後、URLをAngular js（4.4.6）でナビゲートしたい

出典

2017-11-21 Irshad

つまり、this.routersは未定義です。これは、質問に投稿した内容に基づいて私たちが言うことができる唯一の有用なものです。もちろん、それが未定義となる理由は36つありますが、コードを投稿した方がずっと簡単です。バグがそこにあります。角張っていない –

これは、タイプミスや依存関係のインポートが原因である可能性があるため、コンポーネントコードを投稿してください。これらの両方の可能性は、あなたが提供したコードでは確認できません。 –

今、コンポーネントコードを掲載しました。今私を助けてください... – Irshad

私が行ったようにそれを達成するための最良の方法は、別のヘッダーとフッターのコンポーネントを作成している、下に：

ヘッダーとフッター内のコードは、あなたが望むものは何でも表すことができます。

<div class="footer"> 
<i class="material-icons">&#xE90C;</i>{{copyright}} 
</div>

を

と

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

@Component({ 
    selector: 'footer', 
    templateUrl: './footer.component.html', 
}) 

export class FooterComponent implements OnInit { 
    copyright: string; 
    constructor() {} 

    ngOnInit(): void { 

    this.copyright = 'My Copyright'; 
    return; 

    } 

}

同様に、ヘッダコンポーネントを作成することができます。完了したら、セレクタタグを使用するのは、セレクタタグを含める場合は、通常、HTMLファイルが異なる場合に使用します。

<body> 
    <div id="wrap"> 
     <div id="content" class="flex-col"> 
      <div> 
       <header></header> 
      </div> 
      <div class="content fluid flex-col"> 
       <My-App></My-App> 
      </div> 
      <div> 
       <footer></footer> 
      </div> 
     </div> 
    </div> 
</body>

出典

2017-11-29 18:57:50 Rahul

rahulありがとう...しかし、私はそれを動的にしたい。ログイン/登録後に任意のURLに移動した場合、ヘッダーとフッターは同じにする必要があります。 – Irshad

いずれの場合でも、これらのヘッダーとフッターを保持し、ログイン後にリダイレクトされるホームコンポーネントが必要です。をこのホームコンポーネントのに置き換え、残りのURLをホームの子として表示することで、その達成に役立ちます。そのような場合、子URLのルーティングに関する助けが必要ですか？ – Rahul

rahulありがとうございます。それは私が期待していたように働いています... – Irshad

ログイン後、URLをAngular js（4.4.6）でナビゲートしたい

答えて

関連する問題