import { Component , OnInit } from '@angular/core' ; import { ThyGuiderStep , ThyGuider , ThyGuiderConfig , ThyGuiderRef } from 'ngx-tethys/guider' ; @ Component ( { selector : 'thy-guider-directive-hint-example' , templateUrl : 'directive-hint.component.html' } ) export class ThyGuiderDirectiveHintExampleComponent implements OnInit { private option : ThyGuiderConfig ; private guiderRef : ThyGuiderRef ; constructor ( private thyGuider ) { } ngOnInit ( ) { this . option = this . setDefaultGuiderOption ( ) ; this . guiderRef = this . thyGuider . create ( this . option ) ; } public key = 'directive-tip-target' ; private setDefaultGuiderOption ( ) { return { steps : [ { key : 'directive-tip-target' , data : { cover : '' , title : '指令型新手引导' , description : 'DOM已经显示的指令型新手引导' } } , { key : 'directive-tip-target-second' , route : '/components/guider/examples' , data : { cover : '' , title : '同页面的第二个指令型新手引导' , description : '同页面中的第二个通过指令设置的新手引导，' } } , { key : 'back-to-guider-tip' , route : '/components/guider/examples' , data : { cover : '' , title : '回到 guider 页面的新手引导' , description : '通过配置 route ，将新手引导跳转回 guider 页面。' } , hintPlacement : 'right' } ] as ThyGuiderStep [ ] } ; } public startTour ( ) { this . guiderRef . start ( ) ; } }