在路由Angular2之前运行代码答案

【问题标题】：Run code before routing Angular2在路由Angular2之前运行代码
【发布时间】：2017-05-15 10:21:59
【问题描述】：

我目前正在 Angular2 中构建一个应用程序，带有这个主屏幕：

<div id="freewall" class="free-wall" data-min-width="1840" data-total-col="5" data-total-row="4" data-wall-width="1873" data-wall-height="800" style="position: relative; height: 800px;">
<div *ngFor="let block of blokken | async" [@animState]="block.state" (click)="block.toggleState()" [ngClass]='block.color' class='blockexnr{{block.id}} live-tile cell tile2' data-mode='slide' style.height="{{block.height}}px" style.width="{{block.width}}px"
    style='display: none;'>
    <div>
        <p class='full' href='#' class="blocknr{{block.id}}">{{block.tekst1}}</p>
    </div>
    <div data-mode='carousel' data-start-now='true' class='title2 live-tile' data-direction='horizontal' data-delay='3000'>
        <div class="blocknr{{block.id}}">
            <p>{{block.textCar[0]}}</p>
            <img class='products' src='{{block.imgCar[0]}}' />
        </div>
        <div *ngIf="block.amountCar > 1" class="blocknr{{block.id}}">
            <p>{{block.textCar[1]}}</p>
            <img class='products' src='{{block.imgCar[0]}}' />
        </div>
        <div *ngIf="block.amountCar > 2" class="blocknr{{block.id}}">
            <p>{{block.textCar[2]}}</p>
            <img class='products' src='{{block.imgCar[0]}}' />
        </div>
        <div *ngIf="block.amountCar > 3" class="blocknr{{block.id}}">
            <p>{{block.textCar[3]}}</p>
            <img class='products' src='{{block.imgCar[0]}}' />
        </div>
        <div *ngIf="block.amountCar > 4" class="blocknr{{block.id}}">
            <p>{{block.textCar[4]}}</p>
            <img class='products' src='{{block.imgCar[0]}}' />
        </div>
        <div *ngIf="block.amountCar > 5" class="blocknr{{block.id}}">
            <p>{{block.textCar[5]}}</p>
            <img class='products' src='{{block.imgCar[0]}}' />
        </div>
    </div>

</div>

如您所知，它会遍历一个包含 20 个项目的列表，称为 blokken。还有一个动画，叫做@animState，可以通过点击（点击）时调用的函数来激活。这就是那个函数：

 toggleState() {
var numberofblock = this.id;
var n = ".blocknr" + numberofblock.toString();
var n2 = ".blockexnr" + numberofblock.toString();

console.log(n);
console.log(n2);
$(n).html("");
$(".cell").not(n2).css("z-index", -1);

this.state = (this.state === 'active' ? 'inactive' : 'active');  }

该函数将块的状态更改为活动，并且块的缩放方式是：

trigger('animState', [
  state('inactive', style({
    transform: 'scale(1)'
  })),
  state('active',   style({
    transform: 'scale(10)'
  })),
  transition('inactive => active', animate('2000ms ease-in')),
])

这一切都很好，但我真正想要发生的是，当点击一个块时，它会缩放然后路由到一个新页面。但是当我添加一个 [routerLink] 时，它根本不会转到 toggleState() 函数，它所做的只是路由到新组件。

我也尝试了@routeAnimation 动画，但其中的动画适用于整个组件 - 而不仅仅是一个 div - 这不是我想要的。

我一直在谷歌搜索并没有取得多大成功，我唯一发现的是我可能可以使用 解析器，但我也不确定。

谁能帮我完成这项工作（所以当点击一个块时，这是事情的顺序：

点击区块
进入 toggleState() 函数
1块（你点击的那个）的缩放动画
路由到新组件。

我希望有人可以帮助我解决这个问题。谢谢！

【问题讨论】：

这个问题的标题、问题的详细信息和答案毫无意义。

标签： javascript jquery angularjs routing

【解决方案1】：

如果有人在这篇文章中遇到过问题，那其实很容易。

唯一需要的是

constructor(private router: Router){}

this.router.navigate(["/LINK"]);

所以我只需要使用 this.router 调用一个函数，就是这样。这样就不需要 [routerLink]。

【讨论】：