Angular 5：要求不同布局的多种语言

我有一个默认语言为法语的

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

locale将导航到

MyComponent

和

AR

locale到

MyComponent

---

这是冗长的。您有干净的方法吗？

对于那些具有相同场景的用户，请参见我的解决方案，该解决方案仅使用一个组件并支持更改布局方向

1.为每种语言创建路由 假设我的路线是：

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

其思想是通过支持的语言为这些路由添加前缀。我按如下方式动态执行此操作（此处我仅使用阿拉伯语作为前缀）：

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});
                        }
                    }
                }

            }


        });
}

就这些！像这样，您只使用一个组件

---

希望有帮助

为什么不在一个模板中使用ngIf。。。我只是有非常相同的情况，但对于角色^^如何将条件放在模板中我知道它很丑陋：）使用*ngif有很多缺点。首先，您将无法使用延迟加载。其次，它是非常冗余的，您必须为每个组件编写逻辑，而您只能使用HttpClient拦截器导航到正确的语言一次。而且很难看：）

@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]
                }
            ]
        };
    }


}

@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');
                }

            });


    }

}

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});
                        }
                    }
                }

            }


        });
}