Sie könnten innerhalb einer benutzerdefinierten Richtlinie mit Vanille-js perfekt Scrollbar initialisieren (seit es unterstützt es ;-)) wie folgt aus:
import Ps from 'perfect-scrollable';
@Directive({
selector: '[ps]'
})
export class PsDirective {
constructor(private elementRef:ElementRef) {
}
ngAfterViewInit() {
Ps.initialize(this.elementRef.nativeElement);
}
}
Sie können es wie folgt verwenden/anwenden:
@Component({
selector: 'app'
template: `
<div ps class="container">
<div class="content"></div>
</div>
`,
styles: [`
.content {
background-image: url('https://noraesae.github.io/perfect-scrollbar/azusa.jpg');
width: 1280px;
height: 720px;
}
.container {
position: relative;
margin: 0px auto;
padding: 0px;
width: 600px;
height: 400px;
}
`],
directives: [ PsDirective ]
})
export class App {
}
Die Bibliothek muss, bevor diese Weise konfiguriert wurden (CSS und SystemJS):
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.11/css/perfect-scrollbar.min.css"/>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
map: {
'perfect-scrollable': 'https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.11/js/min/perfect-scrollbar.min.js'
},
packages: {
'app': {
defaultExtension: 'ts'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
Sehen Sie diese plunkr: https://plnkr.co/edit/S8DJpHFVNFioklTl1xg6?p=preview.
Hallo ich es versucht, aber es sagt, perfekt-Scrollbar keine Standardexport hat – axcl
Sie entweder eine Typdefinitionsdatei für perfekte schreiben -scrollbar oder Sie können [Angular2-Ziehen-Scrollen] (https://github.com/bfwg/angular2-drag-scroll) verwenden, das eine Angular2-Bibliothek zum Ziehen von Inhalts-Scrolling ist. –