使用路由控制器创建第一个欢迎页面

在之前的coding中我们创建了一个welcome.html和welcome.controller.ts这两个文件，并且在路由配置文件，引入了welcome的控制器

// routerConfig.class.ts
private static readonly pageList = [
        {name: '/1111', controll: WelcomeController},
        {name: '/', controll: LayoutController}
    ];

此时我们开始开发welcome的控制器
所有页面的控制器为了要考虑二次使用的问题，所以传入一个div选择器，所以创建一些接口用来限制页面控制器构造器的入参规定
在./src/interfac中创建pageOption.interface.ts

export interface pageOption {
    el: string;
    query?:any;
}

这里的pageOption作为一个页面控制器的基础接口，如果有特殊入参类型出现，继承自这个基础接口就可以了
接下来在./src/controller中创建welcome.controller.ts

import BaseController from "./base.controller";
import {pageOption} from '../interface/pageOption.interface'
import html from '../component/welcome.html';
import * as $ from 'jquery'
export default class WelcomeController extends BaseController {
    private readonly option: pageOption;

    constructor(option: pageOption) {
        super();
        this.option = option;
   }

    public init(): void {
        $(this.option.el).html(<string>html);
    }
}

看一下运行结果

image.png

运行成功

双击666~~