Angular应用程序的轻松导览– telemachy

Angular应用程序的轻松导览– telemachy
插件名称 telemachy
发布时间 2020年6月16日
插件作者 code-orange

Telemachy组件使您可以为Angular应用程序创建交互式导览。

安装:

# Yarn
$ yarn add telemachy

# NPM
$ npm install telemachy --save

导入TelemachyModule您的根模块(确保RouterModule已加载,Telemachy使用它来自动启动用户导航到的任何组件的导览):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { TelemachyModule } from 'telemachy';

import { AppComponent } from './app.component';

@NgModule({
	imports: [BrowserModule, RouterModule.forRoot([]), TelemachyModule],
	declarations: [AppComponent],
	bootstrap: [AppComponent]
})
export class AppModule {}

最后,将<telemachy-tour>组件添加到您的根应用程序组件(或要显示游览时始终加载的组件):

import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	template: `<telemachy-tour></telemachy-tour><router-outlet></router-outlet>`
})
export class RootComponent {}

用法

在最简单的形式中,只需实现以下HasGuidedTour接口即可使用Telemachy :

@Component({
	selector: 'app-complex-component',
	templateUrl: './complex-component.component.html'
})
export class ComplexComponent implements HasGuidedTour {
	tourAutoStart() {return true;}
	getTour():TourStep[] {
		return [
			new YoutubeTourStep('l9xU1WpdmVY'),
			new ElementTourStep('#complex-thing', 'Here, I will explain this.'),
			new ElementTourStep('#second-complex-thing', 'Then, I will explain this.'),
			new HTMLTourStep(`Finally, we are <em>done</em>!`)
		];
	}
}

通过实现可选tourAutoStart()方法(并使它返回true),Telemachy会在通过角度路由器激活该组件时自动启动该组件的巡视。您也可以明确地说应该通过调用来启动它TelemachyService.startTour(this)。在这两种情况下,Telemachy仅在持久层说用户应该看到游览的情况下才会显示游览。