角通用平台服务器最初不显示某些组件css样式。

Question

一些组件样式在我的角度通用应用程序不工作，直到应用程序完全加载。

下面您可以看到，来自AppServerModuleNgFactory的html不会链接到它的css，因为HTML不包括与其他地方相同的模式(serverApp)。

如何使来自服务器的html成为_ngcontent-serverApp-...而不是_ngcontent-s？

从server.ts (AppServerModuleNgFactory)发送的呈现

css：.copy[_ngcontent-serverApp-c16]

html：<div _ngcontent-sc16="" class="copy">

应用程序加载后的(预引导完成)

css：.copy[_ngcontent-serverApp-c16]

html：<div _ngcontent-serverapp-c16="" class="copy">

app.module.ts里唯一提到serverApp的是

imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserTransferStateModule,
    PrebootModule.withConfig({ appRoot: 'app-root' }),
    ...
]

browser.d.ts

export declare class BrowserModule {
    constructor(parentModule: BrowserModule | null);
    /**
     * Configures a browser-based app to transition from a server-rendered app, if
     * one is present on the page.
     *
     * @param params An object containing an identifier for the app to transition.
     * The ID must match between the client and server versions of the app.
     * @returns The reconfigured `BrowserModule` to import into the app's root `AppModule`.
     */
    static withServerTransition(params: {
        appId: string;
    }): ModuleWithProviders<BrowserModule>;
}

我认为这个文件的评论确切地告诉我什么是错误的，但我不知道如何处理这个信息。ID必须在应用程序的客户端和服务器版本之间匹配。

Answer 1

我不认为使用属性角生成是安全的，只使用.copy类。如果您需要更具体的规则，您可以从html获得它：

CSS: .copy{}    
HTML: <div class="copy"></div>
        
CSS: .copy{}    
CSS: .copy2{} // will be triggered only if condition is true
HTML: <div class="copy" [class.copy2]="condition"></div>