如何根据我运行的项目更改组件中的文本？

Question

我在我的 nx monorepo 中构建 auth 库。

auth 库包含 LoginComponent（智能）和 LoginFormComponent（愚蠢）。

并且我通过使用 loadChildren 加载 auth.module 来延迟加载库，并且在这个模块中我有一个到 LoginComponent 的子路由，它有 LoginFormComponent。

在 LoginFormComponent 我有文本：“登录到我很棒的应用程序”。

<h1>Login to my awesome app</h1>
<form...>

问题是当我想添加另一个 angular 应用程序并使用此身份验证组件和功能时。

因此，当我使用新应用程序的身份验证时，我收到文本：“登录到我很棒的应用程序”。

对于现有的应用程序，文本应该是：“登录到我很棒的应用程序”。

对于新应用应该是：“登录到 ng 应用”。

我只有一个 auth 库和其中一个登录组件。

所以我正在寻找 angular 方法来处理这种情况。

我曾考虑复制组件，但感觉不对。或者使用 i18n 但不确定，因为它用于语言，或者使用 forRoot 并通过文本传递提供者？将令牌与注入一起使用？

我可以通过哪些方式更改文本？如何处理这个问题？ angular 是这个 senario 的解决方案吗？

Answer 1

我能理解你的情况。这是你应该做的。我假设您已经在 nx monorepo 下创建了一个 @shared/auth 库。 auth 库包含 LoginFormComponent.

您应该利用 ForRoot 和 @Inject() 来实现相同的目的。

auth.module.ts


@NgModule({
  // all imports etc
})
export class AuthModule {
  static forRoot(appName: string): ModuleWithProviders<AuthModule> {
    return {
      ngModule: AuthModule,
      providers: [
        { provide: APP_NAME, useValue: appName }
      ],
    };
  }
}

为避免在导入时出现任何循环依赖性 APP_NAME，创建一个文件

config.ts

export const APP_NAME = new InjectionToken<string>('APP_NAME_PARAM');

开始你的LoginFormComponent

LoginFormComponent.component.ts

export class LoginFormComponent{
 
  public appName: string;
  
 constructor(@Inject(APP_NAME) clientAppName: string){
     this.appName = clientAppName;
  }

}

login.component.html

<h1>Login to {{appName}} app</h1>

现在，我们都准备好了。唯一剩下要做的就是在我们的 app.module.ts

中使用 AuthModule

app.module.ts

@NgModule({ 
   imports: [
      AuthModule.forRoot("Super Awesome")
   ]
})
export class AppModule

这也可以帮助您在其他应用中重复使用 AuthModule。您只需要为每个应用程序库创建一个 constant 文件，然后将 Super Awesome 移动到该常量中以获得更好的可读性。

它可能不完全相关，但是，您可以查看 this article for more understanding of ForRoot and InjectionToken

我在我的 Nx monorepo 项目中广泛使用了它。这是一种标准方式。

如何根据我运行的项目更改组件中的文本？

How to change text in the component base on the project I runs?

javascript

typescript

monorepo

angular

nrwl-nx