用戶名不會出現在登錄提交按鈕上：Angular2

大家好我是Angular2的初學者，我正在爲我的學習目的創建一個小應用程序。用戶名不會出現在登錄提交按鈕上：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頁面上創建了幾個router-link，每個都有不同的組件，它們是appComponent.ts（即主要組件my-app）的子組件嗎？

（2）對於許多環節還沒有定義選擇財產@Component裝飾功能，它是一個很好的做法，爲每個組件定義選擇。因爲當我點擊/ home時，/ about等每個在路由器配置文件中定義了不同的組件。

（3）如何我可以溝通（調用一個函數）從LoginComponent，所以，當我點擊與頁面導航出現歡迎用戶名的提交按鈕，登錄鏈接獲取隱藏。

（4）[隱藏]屬性不適用於？

任何幫助表示讚賞！

感謝

來源

2016-11-17 shreyansh

你必須定義將您LoginComponent和AppComponent之間，並從共享共享服務您LoginComponent你必須登錄後發出活動通知您的AppComponent。檢查官方文件爲 Parent and children communicate via a service

來源

2016-11-17 07:15:44 ranakrunal9

你能評論一下我提出的上述四個問題嗎 – shreyansh

我該怎麼做才能指導我通過一些代碼 – shreyansh

用戶名不會出現在登錄提交按鈕上：Angular2

回答

相關問題