在角色2上使用脚本标记（<script>）时遇到一些问题。
首先：我知道angular 2会从模板中删除脚本标记。我克服了这个问题，在index.html中编写脚本。但是，在index.html中编写所有脚本会使代码无法读取。我该如何解决这个问题？
第二次：第一次加载index.html时，我的脚本正常工作（用index.html编写）。但是，在将一些其他模板路由到index.html后，我的脚本无法正常工作。我认为问题与路由有关，但我不确定。
index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/"/>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="bower_components/material-cards/dist/material-cards.css" rel="stylesheet" />
<script src="bower_components/material-cards/js/jquery.material-cards.js"></script>
<script>
$(function () {
$('.material-card')
.materialCard({
icon_close: 'fa-chevron-left',
icon_open: 'fa-thumbs-o-up',
icon_spin: 'fa-spin-fast',
card_activator: 'click'
});
// $('.active-with-click .material-card').materialCard();
window.setTimeout(function () {
$('.material-card').materialCard();
},
2000);
});
</script>
<link href="bower_components/alertify.js/themes/alertify.core.css" rel="stylesheet"/>
<link href="bower_components/alertify.js/themes/alertify.bootstrap.css" rel="stylesheet"/>
<script src="bower_components/alertify.js/lib/alertify.min.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.46/http.dev.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
</head>
<body>
<my-app>
</my-app>
</body>
</html>
app.component.ts
import { Component, ViewContainerRef } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<navbar></navbar>
<router-outlet></router-outlet>
`
})
export class AppComponent {
constructor(private viewContainerRef: ViewContainerRef) {
// You need this small hack in order to catch application root view container ref
this.viewContainerRef = viewContainerRef;
}
getNotification(evt) {
// <child (notifyParent)="getNotification($event)"></child>
console.log(evt);
}
}
movies.component.ts
import { Component, Directive, OnInit, ViewContainerRef, ViewChild, ContentChildren } from '@angular/core';
import { MoviesService } from "./movies.service";
import { HttpModule } from '@angular/http';
import { ActivatedRoute, Router } from '@angular/router';
import { ModalDirective } from 'ng2-bootstrap';
import { NotificationService } from '../Shared/notification.service';
@Component({
selector: 'movies2',
templateUrl: '/templates/movies.component.html',
providers: [MoviesService]
})
export class MoviesComponent implements OnInit {
isLoading = true;
movies: any = [];
selectedMovie: any = {};
constructor(private _moviesService: MoviesService, private router: Router, private notificationService: NotificationService) {
}
ngOnInit() {
this.GetMovies();
}
AddMovie() {
this.router.navigate(['/newmovie']);
}
GetMovies() {
this._moviesService.getMovies().subscribe(p => {
this.movies = p;
});
}
SelectMovie(mv: any) {
this.selectedMovie = mv;
}
removeMovie(val: any) {
this.notificationService.openConfirmationDialog('Are you sure you want to delete ' + val.MovieName + ' ?',
() => {
this._moviesService.deleteMovie(val).subscribe(res => {
this.notificationService.printSuccessMessage(val.MovieName + ' has been deleted.');
this.GetMovies();
}, error => {
this.notificationService.printErrorMessage(error);
});
});
}
removeMovieV2(val: any) {
this._moviesService.deleteMovie(val).subscribe(res => {
this.notificationService.printSuccessMessage(val.MovieName + ' has been deleted.');
this.GetMovies();
}, error => {
this.notificationService.printErrorMessage(error);
});
}
}
movies.component.html
<section class="container">
<div class="row active-with-click">
<div class="col-md-4 col-sm-6 col-xs-12">
<article class="material-card Red">
<h2>
<span>Christopher Walken</span>
<strong>
<i class="fa fa-fw fa-star"></i>
The Deer Hunter
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-responsive" src="https://dl.dropboxusercontent.com/u/2691310/github/material-card/thumb-christopher-walken.jpg">
</div>
<div class="mc-description">
He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...
</div>
</div>
<a class="mc-btn-action">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a class="fa fa-fw fa-facebook"></a>
<a class="fa fa-fw fa-twitter"></a>
<a class="fa fa-fw fa-linkedin"></a>
<a class="fa fa-fw fa-google-plus"></a>
</div>
</article>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<article class="material-card Pink">
<h2>
<span>Sean Penn</span>
<strong>
<i class="fa fa-fw fa-star"></i>
Mystic River
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-responsive" src="https://dl.dropboxusercontent.com/u/2691310/github/material-card/thumb-sean-penn.jpg">
</div>
<div class="mc-description">
He has won two Academy Awards, for his roles in the mystery drama Mystic River (2003) and the biopic Milk (2008). Penn began his acting career in television with a brief appearance in a 1974 episode of Little House on the Prairie ...
</div>
</div>
<a class="mc-btn-action">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a class="fa fa-fw fa-facebook"></a>
<a class="fa fa-fw fa-twitter"></a>
<a class="fa fa-fw fa-linkedin"></a>
<a class="fa fa-fw fa-google-plus"></a>
</div>
</article>
</div>
</div>
</section>
答案 0 :(得分：-1)
angular2官方网站说“我们删除脚本标签以确保安全”，但不编写使用脚本