Try do like this :
@Component({
selector: 'register-page',
template: `
<div class="open-card-BG" *ngIf="registerView == 'regView1'">Reg View 1 Content</div>
<div class="open-card-BG" *ngIf="registerView == 'regView2'">Reg View 2 Content</div>
`,
styleUrls: ['./register-page.component.scss'],
providers: [RegisterService, Configuration, LocalStorageService]
})
export class Appcomponent {
registerView = 'regView1';
}
Else do like this
page1.component.html
<div>
<h1>Page1 Component Content</h1>
</div>
page2.component.html
<div>
<h1>Page2 Component Content</h1>
</div>
home.component.html
<div>
<div class="open-card-BG" *ngIf="registerView == 'regView1'">
<app-page1-component></app-page1-component>
</div>
<div class="open-card-BG" *ngIf="registerView == 'regView2'">
<app-page2-component></app-page2-component>
</div>
</div>
component.ts
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
registerView = 'regView1';
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…