我目前正在使用此主屏幕在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 - 这不是我想要的。
我一直在谷歌搜索没有太大的成功,我发现唯一的事情是我可以使用解析器,但我也不是很确定。
任何人都可以帮我完成这项工作(所以当点击一个块时,这就是事情的顺序:
我希望有人可以帮助我。谢谢!
答案 0 :(得分:1)
如果有人曾经发过这篇文章,那实际上很容易。
唯一需要的是
constructor(private router: Router){}
this.router.navigate(["/LINK"]);
所以我只需要用this.router调用一个函数,就是这样。这样就不需要[routerLink]了。