ヘッダーのログイン送信ボタンにUserNameが表示されない：Angular2

Question

こんにちは私はAngular2の初心者です。私は自分の学習目的のために小さなアプリケーションを作成しています。

LoginComponentの[送信]ボタンをクリックすると、ヘッダーはログインリンクを非表示にする必要があり、ウェルカムユーザー名が表示されます。

app.component.ts

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.html' 
}) 

export class AppComponent implements OnInit { 

    private user:string = ''; 
    isUserLoggedIn = false; 

    constructor() { } 

    getUserName() :void { 
     //calling loginservice and setting he user 
    } 

    ngOnInit(): void { 
    this.getUserName(); 
    } 

/* onSubmitted(loggenIn: boolean) { 
    this.isUserLoggedIn = true; 
    } 
*/ 

} 

app.html

<header> 
      <nav class="navbar navbar-default navbar-fixed-top navbar-collapse"> 
       <div class="container-fluid"> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav navbar-right"> 
        <li *ngIf='!isUserLoggedIn'><a routerLink="/login">Login</a</li> 
        <li *ngIf='isUserLoggedIn'><a>Welcome {{user}}</a></li> 
        </ul> 
       </div> 
       </div> 
      </nav> 
     </header> 

     <div class="container main"> 
     <div class="row"> 
      <router-outlet></router-outlet> 
     </div> 
     </div> 

    <footer> 
     <!-- footer content --> 
    </footer> 

LoginComponent

@Component({ 
    templateUrl: '../app/Login/Login.html' 
}) 

export class LoginComponent { 
// @Output() onSubmitted = new EventEmitter<boolean>(); 

    constructor() { 
    // setting username and password to '' 
    } 

    onSubmit(token : boolean):void { 
    if(token && this.userName) { 
     localStorage.setItem('userName', this.userName); 
     this.loginService.storeUserName(this.userName); 
     //this.onSubmitted.emit(true); 
    } 
    } 
} 

は今、私が試しましたコメント付きコードを見ることができるようにEventEmitterを使用していましたが、デバッグ中はonsubmitted（）が呼び出されませんでした。

ログインページは、電子メール、パスワードで構成され、以下

は私のいくつかの他のクエリですbutton.Iは、ボタンのクリックでフォーム（ngSubmit）のをonSubmitイベントを呼び出しています提出された： -

（1）I app.htmlページにルータリンクを作成しました。それぞれが異なるコンポーネントを持っています。それらはappComponent.tsの子コンポーネントですか（メインコンポーネントmy-appですか）？

（2）多くのリンクでは、@component decorator関数でセレクタプロパティを定義していません。すべてのコンポーネントのセレクタを定義することをお勧めしますか？ 私が/ homeをクリックすると、/ aboutな​​どはそれぞれルータ構成ファイルで異なるコンポーネント定義を持っています。

（3）LoginComponentからどのように通信（関数を呼び出す）することができます。これにより、ページナビゲーションとともに送信ボタンをクリックすると、ようこそユーザー名が表示され、ログインリンクは非表示になります。

（4）[hidden]プロパティがliで機能しないのですか？

ご迷惑をおかけして申し訳ございません！

おかげ

Answer 1

あなたのLoginComponentとAppComponentの間で共有される共有サービスを定義する必要があり、あなたLoginComponentから、あなたのAppComponentに通知し、ログイン後にイベントを放出しなければなりません。 Parent and children communicate via a service