Angular 2：同一组件中的多个HTML页面

发布时间：2020-12-17 17:43:18 所属栏目：安全来源：网络整理

导读：我是角度2的新手,我有一个名为Register的组件,在这1个组件中我有5个 HTML页面,其中一次点击第一个注册页面,我将进入第二个注册页面,点击第二个注册页面,我将转到第3个注册页面.如何在一个组件中制作5个HTML页面我的意思是有没有办法在每个组件上实现多个模板

我是角度2的新手,我有一个名为Register的组件,在这1个组件中我有5个 HTML页面,其中一次点击第一个注册页面,我将进入第二个注册页面,点击第二个注册页面,我将转到第3个注册页面.如何在一个组件中制作5个HTML页面我的意思是有没有办法在每个组件上实现多个模板？如何做路由？主要意图是单独的HTML& SCSS文件和路由逻辑.

截至目前,我正在使用ngIf渲染页面,这使得我的页面非常冗长.有办法实现这个目标吗？

<!--View 1-->
        <div class="open-card-BG" *ngIf="registerView=='regView1'">
Register Page 1
</div>
            <!--View 2-->
            <div class="open-card-BG" *ngIf="registrationView=='regView2'">
Register Page 2
</div>


    @Component({
      selector: 'register-page',templateUrl: './register-page.component.html',styleUrls: ['./register-page.component.scss'],providers : [RegisterService,Configuration,LocalStorageService]
    })
        ngOnInit() {
        this.registerView= "regView1";
      }

    changeView(view) {

          this.registerView= view;
      }

      previousView(view) {

          this.registerView= view;
      }

解决方法

尝试这样做：

@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>
            `,providers: [RegisterService,LocalStorageService]
})

export class Appcomponent {
    registerView = 'regView1';
}

否则这样做

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';
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!