angular - “添加几个页面”到现有的 Angular 应用程序，外观完全不同（不同的样式，没有页眉/页脚等）

Question

我们有一个 Angular 7 webapp，我需要修改它，但我不知道如何修改（没有任何 Angular 经验，前端也没有太多经验；团队中也没有）。

应用程序的所有页面都具有相同的样式（页眉、页脚、css）。这是在 Web 应用程序的根组件“AppComponent”中定义的。我需要做的是创建“几个页面”，它们会有完全不同的外观（没有标题，不同的 css），但会使用相同的服务（相同的代码）进行一些内部逻辑（例如验证）+ 与服务器。入口点将是直接链接。

理想情况下，我想尽可能少地更改现有应用程序的代码：这些新页面有点像一个实验（仍然应该进入 prod 代码库）。

我怎样才能做到这一点？

对我来说，它看起来有 1 个入口点 - main.ts - 加载 1 个模块 - 我们称之为“AppModule” - 它有 1 个引导组件 - “AppComponent”。如果那是真的，我坚信我可以：

1. 要么在 AppComponent 中进行“分支”
   • 不理想，因为我想尽可能少地触摸它
   • 另外，不知道如何让大多数页面仍然是（“AppComponent”+ 内部路由），然后是几个页面（“ExperimentalComponent”+ 内部路由）
2. 或创建一个完全不同的应用程序，将其打包到自己的文件夹中
   • 但是我怎样才能重用服务的代码呢？最好不要跨“模块”导入，例如“../../../mainmodule/src/app/services/my.service.ts”
   • 此外，对于这个简单的“几页”来说，看起来有点麻烦

有没有一个好的和“正确”的方法来做到这一点？

抱歉，如果我写的东西没有多大意义或非常蹩脚，到目前为止，我一直在努力为自己理解 Angular :) 我已经开始浏览一本书，因为基于每个问题进行谷歌搜索并没有太大帮助，但也许你可以给我一些提示，这将加快我的速度。谢谢！

---

只是提供一些细节，尽管这可能都是超常规的或无关紧要的。

示意性地，AppComponent ( app.component.html)：

<mat-sidenav-container... // <--- I need to get rid of this

    ... HEADER DEFINED HERE, 300 LoC ... // <--- and this

    <!-- Main container -->
    <div class="container-fluid main-container">
        <router-outlet></router-outlet>
    </div>

</mat-sidenav-container>

<div class="copyright">&copy; {{companyName}}, {{currentYear}}</div> // <--- and this

应用模块 ( app.module.ts):

@NgModule({
    declarations: [AppComponent, LoginPageComponent, ...],
    imports: [AppRoutingModule, ...],
    providers: [AuthGuard, AuthService, ErrorService, ServerStatusService, UserService, ... ], // <--- I need to use these in my new "pages"
    bootstrap: [AppComponent]
})
export class AppModule { }

应用路由模块 ( app-routing.module.ts):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginPageComponent } from './components/login/login-page.component';
import { AuthGuard, ... } from './services/guard.service';

const routes: Routes = [
    { path: 'user-login', component: LoginPageComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', canActivate: [AuthGuard], component: HomePageComponent },
    ...
    {
        path: '**',
        component: NotFoundPageComponent
    }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

main.ts：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

标签： angular

Answer 1

您可以在此处找到完整的工作演示。 StackBlitz Link

第一个基本解决方案是使用服务，服务维护显示或不显示什么的状态。

您的服务.ts

@Injectable()
    export class CustomstyleService {
        isLogin : boolean = true;
        constructor() { }
    }

上面的 Service 是单例服务，然后您可以在需要自定义组件实现的每个组件中注入。如果您想在用户按下登录页面时隐藏所有元素，那么我们可以使用*ngIf指令来删除和添加页面的其他部分。

app.component.html

<app-header *ngIf="!customStyle.isLogin"></app-header>
<app-login *ngIf="customStyle.isLogin" ></app-login>
<app-container *ngIf="!customStyle.isLogin"></app-container>
<app-footer class="footer" *ngIf="!customStyle.isLogin"></app-footer>

app.component.ts

export class AppComponent  {
  name = 'Angular';
  constructor(private customStyle: CustomstyleService){}
}

上面，我们注入CustomstyleService组件构造函数，然后我们可以通过 using指令isLogin将服务的属性使用到模板中。*ngIf

登录组件.ts

export class LoginComponent implements OnInit {
  constructor(private customStyle: CustomstyleService) { }
  ngOnInit() {
  }
  signIn(){
    this.customStyle.isLogin = false;
  }
}

通过按下登录按钮，我们将isLogin值更改为 false，这样我们就可以显示页面的其他组件而不是登录。

rxjs这是非常基本的实现，您可以通过使用使用方式的声明方式来进一步增强这种方法BehaviorSubject<boolean>(true)。