我正在尝试创建一个组件(带有按钮的div以返回到先前的范围),可以在整个应用程序中使用,如下所示
ZoomHistory.ts ,
import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
//import { olControl} from 'ol/control/control';
@Component({
selector: 'prevview',
template: '<div></div>'
//styles: [require('./map.scss')],
})
export class ZoomHistoryComponent {
@ViewChild('maptoolelement')
private element: ElementRef;
static parameters = [ElementRef, Renderer2, ViewChild];
constructor(private renderer: Renderer2) {
//super();
const backButton = this.renderer.createElement('button');
this.renderer.setAttribute(backButton, 'class', 'ol-navhist-back');
var img = document.createElement('img');
img.src = '../images/zoom-last.png';
img.alt = "Previous view";
backButton.appendChild(img);
renderer.listen(backButton, 'click', (event) => {
// Do something with 'event'
})
this.renderer.appendChild(this.element, backButton);
}
}
我在 map.module.ts 出口这个
import { ZoomHistoryComponent } from '../maptools/zoomhistory/zoomhistory';
@NgModule({
providers: [
],
imports: [
BrowserModule,
RouterModule.forChild(mapRoutes),
],
declarations: [
MapComponent,
ZoomHistoryComponent
],
exports: [
MapComponent,
ZoomHistoryComponent
],
})
export class MapModule { }
在 app.module.ts 中,我按如下方式导入,
import { MapModule } from './map/map.module';
@NgModule({
providers,
imports: [
MapModule]
}),
但是当我把这个组件放在map.html时
<prevview></prevview>
它的投掷错误,如,
compiler.js:486未捕获错误:模板解析错误:'prevview'不是已知元素:1 . 如果'prevview'是Angular组件,则验证它是否为此模块的一部分 . 2.要允许任何元素将'NO_ERRORS_SCHEMA'添加到此组件的'@NgModule.schemas' . (“[错误 - >]