要使用Angular i18n与OpenID Connect，您需要执行以下步骤：

1. 安装Angular i18n模块：在项目目录中运行以下命令来安装Angular i18n模块：

npm install @angular/localize

2. 配置Angular i18n：在Angular项目的angular.json文件中，添加以下配置：

"i18n": {
  "sourceLocale": "en-US",
  "locales": {
    "fr": "src/locale/messages.fr.xlf",
    "de": "src/locale/messages.de.xlf"
  }
}

此配置指定了源语言和支持的其他语言。

3. 创建翻译文件：在src/locale目录下创建翻译文件，例如messages.fr.xlf和messages.de.xlf。这些文件将包含每个语言的翻译消息。

示例messages.fr.xlf文件内容：

  
    
      
        Hello World
        Bonjour le monde
      
    
  

4. 使用翻译：在Angular组件中，您可以使用Angular内置的TranslateService来获取翻译消息。例如，您可以在模板中使用以下方式显示翻译的消息：

{{ 'helloWorld' | translate }}

5. 集成OpenID Connect：使用您选择的OpenID Connect库（例如，angular-auth-oidc-client），按照其说明将OpenID Connect集成到您的Angular应用程序中。

以下是一个示例组件，展示了如何使用Angular i18n和OpenID Connect：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { OidcSecurityService } from 'angular-auth-oidc-client';

@Component({
  selector: 'app-root',
  template: `
    
{{ 'helloWorld' | translate }}
    Login
    Logout
  `,
})
export class AppComponent {
  constructor(
    private translateService: TranslateService,
    private oidcSecurityService: OidcSecurityService
  ) {
    // 设置默认语言
    this.translateService.setDefaultLang('en-US');

    // 根据用户首选语言设置当前语言
    const userLang = navigator.language;
    this.translateService.use(userLang);
  }

  login() {
    this.oidcSecurityService.authorize();
  }

  logout() {
    this.oidcSecurityService.logoff();
  }
}

请注意，这只是一个简单的示例，您可能需要根据具体的要求进行更多的配置和自定义。