Přidání About boxu do Angular aplikace

Živá ukázka

Toto je About box samotné aplikace AboutTheApp. Přepnutím varianty uvidíte další podoby. Kód níže zobrazí přesně tento box. Pro svou aplikaci v něm změňte alias.

<script src="https://aboutthe.app/embed/web/0.3.5/card.js" integrity="sha384-X3VGSEdTNGsfVKfVUx7sq9ICfpWsJW88HDQYidGPio1KjoxYCbSirTNqtbVfq1sj" crossorigin="anonymous" async></script>

<about-the-app alias="aboutthe.app" variant="card" api-base="https://aboutthe.app/api/v1" visual-style="default" palette="default" appearance="auto"></about-the-app>

Přidání do Angular aplikace ve 4 krocích

About box je Web Component, takže nepotřebuje knihovnu pro Angular. Obsah se načítá z AboutTheApp a vaše aplikace na něj jen odkazuje aliasem.

1. 1

   Vytvořte si produkt

   Vytvořte ho v AboutTheApp a poznamenejte si jeho alias. V panelu Integrovat na kartě produktu najdete stejný kód jako v živé ukázce, už s vaším aliasem.

2. 2

   Načtěte skript

   Vložte skript do souboru src/index.html.

3. 3

   Povolte vlastní prvek

   Přidejte CUSTOM_ELEMENTS_SCHEMA do schemas samostatné komponenty, která prvek obsahuje. V aplikaci postavené na NgModules ho přidejte do modulu.

4. 4

   Umístěte prvek

   Použijte <about-the-app alias="aboutthe.app"></about-the-app> v šabloně komponenty.

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-footer",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<about-the-app alias="aboutthe.app" variant="footer"></about-the-app>`,
})
export class FooterComponent {}

Předání verze přes [attr.version]

Verzi navažte přes [attr.version], ne přes [version]. S CUSTOM_ELEMENTS_SCHEMA nastaví Angular [version] jako vlastnost DOM, kterou About box nečte. Zápis [attr.version] nastaví HTML atribut.

Ukázka čte verzi z package.json, k čemuž je potřeba resolveJsonModule v tsconfig.json. Verzi můžete mít i v souboru environment. Poznámky k vydání se zobrazí, pokud stejná verze existuje v katalogu verzí produktu a je veřejná nebo je neveřejná a box je odemčený odemykacím kódem.

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import packageJson from "../../package.json";

@Component({
  selector: "app-footer",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<about-the-app alias="aboutthe.app" variant="footer" [attr.version]="version"></about-the-app>`,
})
export class FooterComponent {
  version = packageJson.version;
}

Výběr podoby a vzhledu

Podobu určuje atribut variant: card (výchozí), footer, compact, dialog, support, version, maker, credits nebo link. Každou si můžete vyzkoušet v živé ukázce výše.

Pokud nastavíte visual-style="host" a palette="host", box převezme písmo, zaoblení a barvy z vaší aplikace. Pokud si nejste jistí, co má obrazovka O aplikaci obsahovat, přečtěte si článek Obrazovka O aplikaci.

Časté otázky