angular - 如何将 BookBlock 插件添加到 Angular (Angular 2)

Question

我无法让 BookBlock 插件在 Angular 中工作。看来 BookBlock 对象是在函数“ngAfterViewInit”中创建的太早了，DOM 还没有准备好使用。

这是组件代码：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Skill } from './skill';
import { SkillService } from './skill.service';

declare var BookBlock: any;
@Component({
moduleId: module.id,
selector: 'skill-list',
templateUrl: './template/skill-list.component.html',
styles: ['.skills {list-style-type: none;}', '*.skills li {padding: 
4px;cursor: pointer;}']
})
export class SkillListComponent implements OnInit {
skills: Observable<Skill[]>;
bbArea: HTMLElement;
bookBlock: any;
constructor(private skillService: SkillService) {}

ngOnInit() {
    this.skills = this.skillService.getSkills();
}

ngAfterViewInit() {

    this.bbArea = document.getElementById("blockbook");
    this.bookBlock = new BookBlock(this.bbArea, {
        speed: 500,
        shadowSides: 0.8,
        shadowFlip: 0.7
    });

}

}

这是视图：

<article>
<h4>My Skills</h4>
<div class="bb-custom-wrapper">
    <div id="blockbook" class="bb-bookblock" >
        <div *ngFor="let skill of skills | async" class="bb-item">
            <a href="" [routerLink]="['/skills', skill.id]">
                {{skill.id}}. {{skill.name}}
            </a>
        </div>
    </div>
</div>
</article>

这是错误：

core.umd.js:1091 ERROR Error: Uncaught (in promise): TypeError: Cannot read 
property 'style' of undefined
TypeError: Cannot read property 'style' of undefined
at BookBlock._init (bookblock.js:111)
at new BookBlock (bookblock.js:47)
at SkillListComponent.ngAfterViewInit (skill-list.component.ts:26)

实际的错误行是这样的：

 ...
      // previous item´s index
               this.previous = -1;
               // show first item
                  this.current = this.items[this.currentIdx];
               ***this.current.style.display = 'block';***
               // get width of this.el
               // this will be necessary to create the flipping layout
               this.elWidth = this.el.offsetWidth;
               var transEndEventNames = {
                   'WebkitTransition': 'webkitTransitionEnd',
                   'MozTransition': 'transitionend',
      ...

如果您需要更多信息，请告诉我。谢谢！

Answer 1

我只是设法完成它。这是带有简单 Angular 5 应用程序和 jquery bookblock 插件的仓库 + 带有 ngFor 循环和 http 请求模拟（setTimeout）

https://bitbucket.org/tomson234/bookblock_angular/src/master/

关键步骤：

角-cli.json

  "styles": [
    "styles.css",
    "css/default.css",
    "css/bookblock.css",
    "css/demo4.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "./js/modernizr.custom.js",
    "./js/jquerypp.custom.min.js",
    "./js/jquery.bookblock.min.js"
  ],

app.component.html：

<div class="container">
<div class="bb-custom-wrapper">

    <div id="bb-bookblock" class="bb-bookblock">
      <div class="bb-item" *ngFor="let item of list">
        <div class="bb-custom-firstpage">
          <h1>{{item}}</h1>
        </div>
        <div class="bb-custom-side">
          <p>Pastry bear claw oat cake danish croissant jujubes danish. Wypas soufflé muffin. Liquorice powder pastry
            danish. Candy toffee gummi bears chocolate bar lollipop applicake chocolate cake danish brownie.</p>
        </div>
      </div>
    </div>

    <nav>
      <a id="bb-nav-first" href="#" class="bb-custom-icon">First page</a>
      <a id="bb-nav-prev" href="#" class="bb-custom-icon">Previous</a>
      <a id="bb-nav-next" href="#" class="bb-custom-icon">Next</a>
      <a id="bb-nav-last" href="#" class="bb-custom-icon">Last page</a>
    </nav>

  </div>

</div><!-- /container -->

app.component.ts

import { Component, OnInit } from '@angular/core';
declare var $ :any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  list:string[] = [];

  ngOnInit(): void {

    //simulating http request
    setTimeout(() => {
      this.list = ["asf", "vzxca", "fasdf"];
      setTimeout(() => { this.initBookBlock() }, 1000);
    }, 1000);
  }

  private initBookBlock(): void {
    var Page = (function() {      
      var config = {
 ...