Question

我的方法如下。

文件夹结构

mobile-view.component.html

<p> this is mobile view</p>

desktop-view.component.html

<p> this is desktop view</p>

mobile.component.ts

import { BaseComponent } from './base.component';

@Component({
    selector: 'app-mobile-view',
    templateUrl: './mobile-view.component.html'
})

export class MobileComponent extends BaseComponent { }

desktop.component.ts

import { BaseComponent } from './base.component';

@Component({
    selector: 'app-desktop-view',
    templateUrl: './desktop-view.component.html'
})

export class DesktopComponent extends BaseComponent { }

base.component.ts

@Component({
   selector: 'app-root',
   template: `<app-mobile-view *ngIf="isMobileView"></app-mobile-view>

    <app-desktop-view *ngIf="!isMobileView"></app-desktop-view>`
})
export class BaseComponent implements {

   isMobileView: boolean;

   constructor(){
        if (navigator.userAgent &&
           (navigator.userAgent.match(/Android/i) ||
           navigator.userAgent.match(/webOS/i) ||
           navigator.userAgent.match(/iPhone/i) ||
           navigator.userAgent.match(/BlackBerry/i) ||
           navigator.userAgent.match(/Windows Phone/i))) {

           this.isMobileView = true;
        } else {
           this.isMobileView = false;
        }
   }

   ngOnInit() {
    // code
   }

   // various methods
}

在这种方法中，我的主要逻辑和所有绑定变量都位于base.component.ts

移动组件和桌面组件扩展了基本组件以访问所有方法和变量

注意：-这是演示代码，仅用于了解我的尝试。

要求：

必须构建AOT。
需要任何更好的方法或标准实践实现这一目标
需要一种基于以下内容动态设置模板的方法发出请求的设备。请参阅base.component.html 获取userAgent的代码的构造函数（提供设备

以前使用的方法：-

main.component.html

@Component({
   selector: 'app-root',
   template: function () {
     if (isMobileUser()) {
            return require('./mobile-view.component.html');
       } else {
            return require('./desktop-view.component.html');
       }
     }(),
    styleUrls: ['./main.component.scss']
})

export class MainComponent {
}

采用这种方法，AOT构建失败
组件装饰器中的函数调用已弃用

Answer 1

您可以采用这种方法，与上一种方法相比，它更简单。结合使用ngContainer和ngTemplateoutlet，您可以根据条件将模板注入到容器中。

@Component({
    selector: 'app-mobiledesktop-view',
    templateUrl: './mobiledesktop-view.component.html'
})

export class MobileDesktopComponent { }


**Template:**

<ng-template #mobileView>
  This is mobile view
</ng-template>

<ng-template #desktopView>
  This is desktop view
</ng-template>

<ng-container *ngTemplateOutlet="isDesktop ? desktopView : mobileView">

</ng-container>

使用动态组件：

@Component({
    selector: 'app-desktop-view',
    template: 'This is desktop view'
})

export class AppDesktopComponent { }

@Component({
    selector: 'app-mobile-view',
    template: 'This is mobile view'
})

export class AppMobileComponent { }

@Component({
    selector: 'app-container-view',
    template: ' <ng-container #messagecontainer></ng-container>'
})

export class AppContainerComponent { 
     private componentRef;
     @ViewChild('messagecontainer', { read: ViewContainerRef }) entry: ViewContainerRef;
     constructor(private resolver: ComponentFactoryResolver) { }

     ngAfterViewInit(){
        const component = (isDesktop) ? AppDesktopComponent : AppMobileComponent;
        const factory = this.resolver.resolveComponentFactory(component);
        this.componentRef = this.entry.createComponent(factory);
        //this.componentRef.instance.data = appData;
     }

     ngOnDestroy() {
        this.componentRef.destroy();
     }
}

如何在angular 6的单个组件中动态引用2个模板html文件（移动和桌面）？

1 个答案: