你会得到一个错误 <safe-area> 是Angular 编译器的未知元素。 通过添加 CUSTOM_ELEMENTS_SCHEMA 到您的独立组件或模块计划.

1. 独立的构成部分(Angular 14+)

// your.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { registerSafeAreaElement } from '@aashu-dubey/capacitor-statusbar-safe-area';

registerSafeAreaElement();

@Component({
  selector: 'app-your-component',
  standalone: true,
  template: `
    <safe-area>
      <!-- Other content -->
    </safe-area>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class YourComponent {}

2. 恩格穆尔

修改宣布您组件的模块以允许自定义元素 :

// your-component.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class YourComponentModule {}

然后在组件中注册自定义元素 :

// app.component.ts or your-component.ts
import { registerSafeAreaElement } from '@aashu-dubey/capacitor-statusbar-safe-area';

registerSafeAreaElement();

<!-- your.component.html -->
<safe-area>
  <!-- Other content -->
</safe-area>

import { registerSafeAreaElement } from '@aashu-dubey/capacitor-statusbar-safe-area';

registerSafeAreaElement();

const MyComponent = () => {
  return <safe-area>{/* Other content */}</safe-area>;
};

您可能需要创建一个 *.d.ts react 中自定义元素的文件 :

import type { SafeAreaHTMLProps } from '@aashu-dubey/capacitor-statusbar-safe-area';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'safe-area': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & SafeAreaHTMLProps;
    }
  }
}

export {};

<script setup lang="ts">
  import { registerSafeAreaElement } from '@aashu-dubey/capacitor-statusbar-safe-area';

  registerSafeAreaElement();
</script>

<template>
  <safe-area>
    <!-- Other content -->
  </safe-area>
</template>

确保您启用 承认本地习惯元素 内 vite.config.ts数字 :

// vite.config.ts > plugins
vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag === 'safe-area',
    },
  },
}),

还有,为了 合适的打字支持 内 .vue <template>创建一个 *.d.ts 文件并添加以下代码:

import type { HTMLAttributes, PublicProps } from 'vue';
import type { SafeAreaHTMLProps } from '@aashu-dubey/capacitor-statusbar-safe-area';

type DefineCustomElement<
  ElementType extends HTMLElement,
  SelectedAttributes extends keyof ElementType = keyof ElementType,
> = new () => ElementType & {
  $props: HTMLAttributes & Partial<Pick<ElementType, SelectedAttributes>> & PublicProps;
};

type SafeAreaAttributes = 'mode' | 'edges';

declare module 'vue' {
  interface GlobalComponents {
    'safe-area': DefineCustomElement<SafeAreaHTMLProps, SafeAreaAttributes>;
  }
}

export {};