私はlogincomponentにルーティングしているときにapp.component.htmlのコンポーネントを除外したいと考えています。

Question

私はAngular2を初めて使用しています。しかし、ちょうどこのことの解決策を知りたい。私のHTML全体のレイアウトはapp.component.htmlページにある。私はloginコンポーネントにリダイレクトするそのページ上にログインボタンを与えているが、ログインボタンをクリックしようとしているときHTMLページ全体がまだそこにあり、ログインページ（ログインが動作します!!）のHTMLの上下があります。ログインページよりapp.componentのHTMLを除外したいです

ここは私のapp.componentです.htmlのページコード：ここで

<header> 
    <nav> 
     <div class="row"> 
      <ul class="main-nav"> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Sign In</a></li> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Resume</a></li> 
       </ul> 
      </div> 
    </nav> 
    <div class="code1"> 
     <h1>Every Problem has a Solution</h1> 

     <a class="btn btn-full" href="#">Code Now</a> 
      <a class="btn btn-ghost" href="#">Show me more</a> 
      </div> 
</header> 

<section class="section-features"> 
    <div class="row"> 
     <h2>Love Web Designing &mdash; Hotcake Technologies in Market </h2> 
     <p class="long-copy"> 
      Web design encompasses many different skills and disciplines in the production and maintenance of websites. 
      The different areas of web design include web graphic design; interface design; authoring, including 
      standardised code and proprietary software; user experience design; and search engine optimization 
      </p> 
    </div> 

    <div class="row"> 
     <div class="col span_1_of_4 box"> 
      <i class="ion-social-html5 icon-big"></i> 
      <h3>HTML5</h3> 
      <p>HTML5 is the latest evolution of the standard that defines HTML. 
       The term represents two different concepts. It is a new version of the 
       language HTML, with new elements, attributes, and behaviors, and a 
       larger set of technologies that allows the building of more diverse and 
        powerful Web sites and applications</p> 
     </div> 
     <div class="col span_1_of_4 box"> 
      <i class="ion-social-css3 icon-big"></i> 
      <h3>CSS3</h3> 
      <p>CSS3 has been split into "modules". It contains the "old CSS specification" (which has been split into smaller pieces). In addition, new modules are added. 

Some of the most important CSS3 modules are: 

Selectors 
Box Model 
Backgrounds and Borders 
Image Values and Replaced Content 
Text Effects 
2D/3D Transformations 
Animations 
Multiple Column Layout 
User Interface</p> 
     </div> 
     <div class="col span_1_of_4 box"> 
      <i class="ion-social-angular icon-big"></i> 
      <h3>Angular</h3> 
      <p>AngularJS (commonly referred to as "Angular.js" or "AngularJS 1.X") is a 
       JavaScript-based open-source front-end web application framework mainly 
       maintained by Google and by a community of individuals and corporations to 
        address many of the challenges encountered in developing single-page applications. 
        </p> 
     </div> 
     <div class="col span_1_of_4 box"> 
      <i class="ion-social-javascript icon-big"></i> 
      <h3>Javascript</h3> 
      <p>JavaScript ("JS" for short) is a full-fledged dynamic 
       programming language that, when applied to an HTML document, can provide dynamic interactivity on websites. 
        It was invented by Brendan 
       Eich, co-founder of the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation.</p> 
     </div> 
    </div> 
</section> 


<section class="projects"> 
    <div class="row"> 
     <h2>Want to see Projects &mdash; Simple as 1,2,3</h2> 
    </div> 
    <div class="row"> 
<div class="col span_1_of_2 steps_box"> 
    <img src="../assets/image/projectimage.png" class="mobile_screen"> 
</div> 
<div class="col span_1_of_2 steps_box"> 
    <div class="work_step"> 
     <div>1</div> 
     <p>We have quite a good list of projects in jquery and JavaScript,want to see the projects-keep reading</p> 
    </div> 
    <div class="work_step"> 
     <div>2</div> 
     <p> It's free -yes you heard correct, Just Sign In with your Gmail Account </p> 
    </div> 
    <div class="work_step"> 
     <div>3</div> 
     <p>Access the pandora of projects .It will surely help you in learning JavaScript and jquery</p> 
    </div> 

    ***<a [routerLink]="['/login']" class="btn-app"><img src="../assets/image/login.jpg"></a>*** 

</div> 

    </div> 


</section> 

<section class="section-login"> 

</section> 

<router-outlet></router-outlet> 

は私app.module.tsある

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import {RouterModule,Routes} from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { LoginComponent } from './Login/login/login.component'; 

const approutes:Routes=[ 
{path: 'login',component:LoginComponent}, 
{path:'',component:AppComponent} 
]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent 
    ], 
    imports: [ 
    BrowserModule, 
     RouterModule.forRoot(
     approutes, 
     { enableTracing: true } // <-- debugging purposes only 
    ) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Image

Answer 1

すべてのページで必要としないHTMLを、「ホーム」コンポーネントまたはその呼び出したいものに置きます。

あなたのルートはその後、次のようになります。

const approutes:Routes=[ 
{path: 'login',component:LoginComponent}, 
{path:'',component:HomeComponent} 
]; 

そして、あなたのAppComponentはルータだけ-アウトレットLoginComponentとHomeComponentで、そしてもちろん共有されているHTMLコードを持っています。

あなたはヘッダがログインし、ホームに表示させたい場合は次のようになります。

<header> 
    <nav> 
     <div class="row"> 
      <ul class="main-nav"> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Sign In</a></li> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Resume</a></li> 
       </ul> 
      </div> 
    </nav> 
    <div class="code1"> 
     <h1>Every Problem has a Solution</h1> 

     <a class="btn btn-full" href="#">Code Now</a> 
      <a class="btn btn-ghost" href="#">Show me more</a> 
      </div> 
</header> 
<router-outlet></router-outlet> 

ルータ出口はその後、どのルートに応じて、HomeComponentのHTMLまたはLoginComponentのいずれかに置き換えられますあなたは現在にいる。