如何在一个 Angular 项目中使用两个 html 模板答案

【问题标题】：How can I use two html template in one angular project如何在一个 Angular 项目中使用两个 html 模板
【发布时间】：2021-02-18 17:49:05
【问题描述】：

我正在尝试开发一个 Angular 应用程序，该应用程序有两个部分。一部分是管理部分，另一部分是用户部分。在管理部分，我想使用拥有自己的 CSS 和 js 文件的管理模板。在用户部分，我想使用登陆页面模板，它也有自己的 CSS 和 js 文件。我想在一个 Angular 项目中使用这两个模板。示例：我有 Admin LTE HTML 模板和登陆页面 HTML 模板。我创建了一个名为 MyApp 的 Angular 项目。现在我想在 MyApp 中使用 Admin LTE 和登陆页面模板。我怎样才能做到这一点？提前致谢。

【问题讨论】：

标签： angular

【解决方案1】：

简单的答案是：

您必须使用 angular cli（命令行界面）生成两个组件。在你的 app.component.ts 路径下打开你最喜欢的终端。使用以下命令生成新组件。 ng generate component <name of your component>
使用 app.component 的 html 模板，例如：

<div *ngIf="isUserCondition"><app-your-landingpage-component></div>
<div *ngIf="isAdminCondition"><app-your-admin-component></div>

isUserCondition 和 isAdminCondition 都是布尔值，您可以在 app.module 的 typescript 文件中设置它们。您必须以您决定用户是否为管理员的方式填充布尔值。

有关更多信息，我可以推荐角度页面。组件主题请看here。

【讨论】：

非常感谢。但我也面临初始化样式链接的问题。在我的管理模板中，我使用了引导程序版本 3.4.1（最旧），而我的登录页面模板引导程序版本是 4.6。现在我该如何初始化它们？
您可以使用样式 url 属性。 styleUrls: ['./path/to/your/styles.css']。这可以放在 ts 文件中的 @Component 注释中吗？

【解决方案2】：

首先有两种方法，一种更简单的方法是您只想为一种类型创建一个模板，另一种为另一种类型，另一种更复杂的解决方案允许您导航，例如不同的管理页面另一方面，不同页面之间的导航。由用户。我会这样做吗？

简单的解决方案

如前所述，在 HTML 标记中使用 * ngIf，这意味着如果满足条件，则显示，如果不满足，则不显示。例如：

<ng-container *ngIf="isAdmin"><adminComponent></adminComponent></ng-container>
<ng-container *ngIf="!isAdmin"><userComponent></userComponent></ng-container>

困难但更好的解决方案

更复杂的解决方案需要你了解一点角度路径管理并使用防护。

就我而言，这就是我创建将您带到后台的路线的方式（后台 = 部分管理员）：

{
                path: paths.backoffice,
                loadChildren: './features/backoffice/backoffice.module#BackofficeModule',
                canActivate: [BackofficeGuard]
}

守卫包含什么？非常简单：我在我的服务中查找用户并检查（在我的情况下，它具有 admin 属性，它是一个布尔值）是否是管理员。如果是 admin 我返回 true 以便允许浏览，如果是 false 我不返回任何内容并将其发送到家中。

export class BackofficeGuard implements CanActivate {

    constructor(private router: Router, private stateService: StateService) {
    }

    isAdmin = false;

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ):
        | Observable<boolean | UrlTree>
        | Promise<boolean | UrlTree>
        | boolean
        | UrlTree {
        return this.stateService.getLoggedUser().pipe(
            map(user => {
                if (user.admin) {
                    return true;
                } else {
                    return this.router.createUrlTree(['/home']);
                }
            })
        );
    }

    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this.canActivate(route, state);
    }

}

这样您就可以使用 URL 进入您的管理区。如果您想以更简单的方式输入，您可以创建一个链接，将您带到 URL 管理员，只有当您是管理员时，它才会让您通过。

Angular 的路由指南：https://angular.io/guide/router

【讨论】：