查了一圈,网上都是其他的XXX is not a function,他们的说是根模块禁止$监听
我在制作图片滚播时,在vscode里不会报错,但是在chrome里开发者工具提示我如下错误,并且图片也是竖直排列,并没有轮播。
backend.js:32708 Uncaught TypeError: rootNgProbe.inject is not a function
at Angular2Adapter._trackAngularChanges (backend.js:32708)
at Angular2Adapter.setup (backend.js:32704)
at Object. (backend.js:33421)
at webpack_require (backend.js:20)
at Object. (backend.js:47)
at webpack_require (backend.js:20)
at backend.js:40
at backend.js:43
代码片段如下:
css:
.container {
position: relative;
overflow: hidden;
}
.container.image-slider {
display: flex;
overflow-x: scroll;
}
.nav-section {
position: absolute;
bottom: 0;
width: 100%;
opacity: 0.5;
color: #fff;
background-color: #000;
display: flex;
justify-content: flex-end;
align-items: stretch;
}
.nav-section.slide-button {
display: flex;
width: 10px;
height: 10px;
background-color: #fff;
text-decoration: none;
border-radius: 50%;
margin: 5px;
}
html:
<div class="container">
<div class="image-slider">
<img *ngFor="let slider of sliders" [src]="slider.imgUrl" [alt]="slider.caption">
</div>
<div class="nav-section">
<span *ngFor="let _ of sliders; let idx = index" class="slide-button">
</span>
</div>
</div>
ts:
import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
export interface ImageSlider {
imgUrl: string;
link: string;
caption: string;
}
@Component({
selector: 'app-image-slider',
templateUrl: './image-slider.component.html',
styleUrls: ['./image-slider.component.css']
})
export class ImageSliderComponent implements OnInit {
@Input() sliders: ImageSlider[] = [];
constructor() { }
ngOnInit() {
}
}