2017-06-06 20 views
1

私のプロジェクトでは、Registerページを持っていると仮定して、私のプロジェクトにUXデザインを持っています。そのため、htmlとcssでRegisterコンポーネントを作成し、状態 'localhost:8080/register'すなわち '/ register'をルートとして与えました。 正常に登録されたら、いくつかのルート統計情報を登録するための別のHTMLテンプレートを "/ register/done"として表示したいのですが、新しいコンポーネントを作成したくないので、コンポーネントなしでルートを作成することができます。 2番目の方法は、現在のコンポーネントのHTMLテンプレートを置き換えて、成功した登録確認画面を表示することです。 HTMLテンプレートを動的に変更することも可能です。私がwebpackを使用しているので、私は考えることができません。角2ルートは、コンポネントなしの確認画面を表示しますか?

これらの2つの関連するルートを別のHTMLテンプレートとルートで表示する他のソリューションがある場合は、ここでそれを共有してください。

ありがとうございます!

+0

私はかなり通常のアプローチは、認証を必要とするルートで'ルートguard'を設定することであろう。あなたがログインしていない場合は、 '/ login'にリダイレクトされます。ログインしている場合は、実際のルートに移動します。そして、すでにログインしているときにユーザーが積極的に '/ login'にナビゲートした場合 - 単に"ログインしています...何か何か "と表示された場合 –

+0

@FredrikLundinあなたは私の問題を解決していないと思います。質問の説明と一緒にもう一度行ってください。ここにガードの役割はなく、私が議論したログイン関連の事もありません。 –

+0

あなたは正しいです、私はそれをあまりにも速く読んでいます - それについて申し訳ありません!私は本当にあなたの問題のための良い解決策はありませんが、多分このスレッドは助けることができます:https://stackoverflow.com/questions/40786490/dynamically-load-html-template-in-angular2 –

答えて

0

フラグを使用して、htmlテンプレートを動的に変更します。 あなたの要件に応じてregister.component.tsのフラグをtrueまたはfalseに設定します。そして、htmlテンプレートでは、 'ngIf'を使用してテンプレートビューを切り替えることができます。

<div *ngIf="flag"> 
 
    Main Template 
 
</div> 
 

 
<div *ngIf="!flag"> 
 
    Successfull registration template 
 
</div>

`

+0

ありがとう、これはすでに私の心の中に入ってきました。他のオプションはありますか? –

0
I have solved it like you say but with optimized ngIf else in Angular 4. like following- 


<div class="parent-div"> 
    <div class="signup-center " *ngIf="!signUpDone; else confirm"> 
     <div>Signup with emailid> 
      ....Signup screen..... 
     </div> 
    </div> 
    <ng-template #confirm> 
    <div>Congratulations!! You have successfully created your account</div> 
    </ng-template> 
</div> 
関連する問題