@acpaas-ui/ngx-context 中文文档教程

Question

@acpaas-ui/ngx-context

这个包管理元标签和其他 SEO 属性。

Usage

import { ContextModule, ContextService } from '@acpaas-ui/ngx-context';

Documentation

访问我们的文档网站获取完整的操作文档和指南

Different ways to set tags and other SEO properties.

Set defaults

您可以使用 forRoot() 选项：

API

Name	Default value	Description
useTitleSuffix: boolean;	false	Add an optional title suffix.
extendTitle: boolean;	false	Append parent page titles (when using router context).
titleDelimiter: string;	'|'	The separator to use when extendTitle is true.
defaults: Context;	{}	Default values for the meta tags. Have a look at the list down below for an overview of possible tags.
routerContext: boolean;	true	Listen for meta data on the route changes.

Example

@NgModule({
    imports: [
        ContextModule.forRoot({
            useTitleSuffix: true,
            extendTitle: true,
            titleDelimiter: ' | ',
            defaults: {
                titleSuffix: 'Context Module',
            },
            routerContext: true,
        }),
    ]
})

Set tags on routes

您可以使用 data 属性在路由上设置标签。 ContextService 将订阅路由器并自动获取这些标签。

export const CONTEXT_EXAMPLES_ROUTES: Routes = [
    {
        path: '',
        component: ContextDemoPageComponent,
        pathMatch: 'full',
        data: {
            meta: {
                page: 'Context example page',
                title: 'Context',
                description: 'Description of the context example page',
                metatags: 'Antwerp UI, Angular, context',
            },
        },
    },
];

Set tags on routes

您也可以使用 loadContext 方法在您的组件中手动设置标签。 这对于异步数据或通用路由很有用。

import { ContextService } from '@acpaas-ui/ngx-context';

@Component({
    providers: [
        ContextService,
    ],
})

export class ContextDemoPageComponent {
    constructor(private contextService: ContextService) {}

    public setTitle() {
        this.contextService.updateContext({
            title: 'New context example title',
        });
    }
}

<button class="a-button" (click)="setTitle()">Set title</button>

Default available tags

Context 界面中提供了最常用的标签。 但是，您可以自由使用格式为 [key: string]: string; 的任何标签。

• title
• titleSuffix
• description
• favIcon
• og:url
• og:type
• og:title
• og:description
• og:image
• fb:app_id
• og:locale
• og:locale:alternate
• og:see_also
• og:updated_time
• twitter:card
• twitter:site
• twitter:creator

Contributing

请访问我们的贡献指南，了解有关如何贡献的更多信息。