角度 5 :多种语言请求不同的布局

Question

我有一个默认语言法语的Angular 5应用程序。我必须添加需要更改全局布局的阿拉伯语(内容必须从右到左显示......

我想知道是否有办法只使用一个组件并进行条件模板选择。例如：

--my-compenent_ar.html
--my-compenent_fr.html
--my-component.ts
And in my @Component({
moduleId: module.id,
templateUrl: ==> condition here
styleUrls: ['./sign-in.component.scss']
})
export class MyComponent

当前版本的 Angular (5( 本身不支持这种情况。

有什么好方法吗？

---

我想做的是

--my-compenent_ar.html
--my-compenent_fr.html
--my-component.ts
--my-component.ar.ts
@Component({
moduleId: module.id,
templateUrl: './my-compenent_fr.html'
styleUrls: ['./sign-in.component.scss']
})
export class MyComponent {
....
}
@Component({
moduleId: module.id,
templateUrl: './my-compenent_ar.html'
styleUrls: ['./sign-in.component.scss']
})
export class MyComponentAR extends MyComponent {}

使用此配置，FR区域设置将导航到MyComponent，并将区域设置AR导航到MyComponentAR。

这很冗长。你有干净的方法来做到这一点吗？

Answer 1

对于那些具有相同方案的人，在我的解决方案下面，它只使用一个组件并支持更改布局方向。

1. 为每种语言创建路由

假设我的路线是：

const routes: Routes = [
{
path: '',
component: HomeComponent,
pathMatch: 'full'
},
{
path: 'users',
children: [
{
path: '',
component: UsersComponent
},
{
path: ':uid/profile',
component: ProfileViewComponent
}
]
}
]

这个想法是用支持的语言作为这些路由的前缀。我动态地执行此操作，如下所示(我在这里只用阿拉伯语作为前缀(：

/**
* Initialize language and routes
* @param routes
* @returns {Promise<any>}
*/
init(routes: Routes): Promise<any> {
this.routes = routes;
let children: Routes = [...this.routes];
/** exclude certain routes */
for (let i = children.length - 1; i >= 0; i--) {
if (children[i].data && children[i].data['skipRouteLocalization']) {
children.splice(i, 1);
}
}
/** append children routes */
if (children && children.length) {
if (this.locales.length > 1) {
this.routes.unshift({path: 'ar', children: children});
}
}
return of(this.routes).toPromise();
}

此方法在应用程序初始化时调用：

@Injectable()
export class ParserInitializer {
parser: LocalizeParser;
routes: Routes;
/**
* CTOR
* @param injector
*/
constructor(private injector: Injector) {
}
/**
* @returns {Promise<any>}
*/
appInitializer(): Promise<any> {
const res = this.parser.init(this.routes);
res.then(() => {
let router = this.injector.get(Router);
router.resetConfig(this.parser.routes);
});
return res;
}
/**
* @param parser
* @param routes
* @returns {()=>Promise<any>}
*/
generateInitializer(parser: LocalizeParser, routes: Routes[]): () => Promise<any> {
this.parser = parser;
this.routes = routes.reduce((a, b) => a.concat(b));
return this.appInitializer;
}
}
/**
* @param p
* @param parser
* @param routes
* @returns {any}
*/
export function getAppInitializer(p: ParserInitializer, parser: LocalizeParser, routes: Routes[]): any {
return p.generateInitializer(parser, routes).bind(p);
}
@NgModule({
imports: [CommonModule, RouterModule, TranslateModule],
declarations: [],
exports: []
})
export class LocalizeRouterModule {
static forRoot(routes: Routes, config: LocalizeRouterConfig = {}): ModuleWithProviders {
return {
ngModule: LocalizeRouterModule,
providers: [
{
provide: RAW_ROUTES,
multi: true,
useValue: routes
},
config.parser,
// LocalizeParser,
ParserInitializer,
{
provide: APP_INITIALIZER,
multi: true,
useFactory: getAppInitializer,
deps: [ParserInitializer, LocalizeParser, RAW_ROUTES]
}
]
};
}

}

2. 使用引导 RTL

由于阿拉伯语要求布局方向从右到左，因此我使用 RTL Boostrap 支持来执行此操作。我将这个 rtl css 的作用域限定在一个.rtlcss 类中，并在选择阿拉伯语时使用角度指令将此 css 类设置为顶级。

@Directive({
selector: '[yfLayoutClass]'
})
export class LayoutClassDirective implements OnInit {
constructor(private elRef: ElementRef,
private renderer: Renderer2,
private store: Store<fromRoot.State>) {
}
ngOnInit(): void {
this.store.select(fromRoot.getLocale)
.filter(loc => loc != null)
.subscribe(locale => {
if (locale.isArabic()) {
this.renderer.addClass(this.elRef.nativeElement, 'rtl');
} else {
this.renderer.removeClass(this.elRef.nativeElement, 'rtl');
}
});

}
}

3. 当 lang 更改时重定向到正确的前缀路由

当语言更改时，必须将用户重定向到正确的前缀路由。为了动态执行此操作，我在appComponent中使用以下代码

public ngOnInit(): void {
this.translateService.onLangChange
.combineLatest(this.router.events)
.subscribe(([langEvent, event]) => {
if (event instanceof RoutesRecognized) {
let currentUrl = event.url;
let locale = Locale.getLocaleByShortcut(langEvent.lang);
let queryParams = event.state.root.queryParams;
if (locale) {
if (locale.isArabic()) {
if (!ContextUtils.isArabicUrl(currentUrl)) {
this.router.navigateByUrl(ContextUtils.arabizeUrl(currentUrl), {queryParams: queryParams});
}
} else {
if (ContextUtils.isArabicUrl(currentUrl)) {
this.router.navigateByUrl(ContextUtils.frenchifyUrl(currentUrl), {queryParams: queryParams});
}
}
}
}

});
}

就这样！像这样，你只使用一个组件。

希望对您有所帮助！