Fatal编程技术网
  • javascript/
  • Javascript Angular2删除脚本标记

Javascript Angular2删除脚本标记

javascript jquery html angular

Javascript Angular2删除脚本标记,javascript,jquery,html,angular,Javascript,Jquery,Html,Angular,在angular 2上使用脚本标记（）会遇到一些问题 首先：我知道angular 2从模板中删除脚本标记。我克服了这个问题，用index.html编写脚本。但是，在index.html中编写所有脚本会使代码无法读取。我怎样才能解决这个问题 Second：当第一次加载index.html时，我的脚本工作（用index.html编写）。但是，在路由其他模板并返回index.html后，我的脚本无法工作。我认为问题与路线有关，但我不确定 index.html <html> <head

在angular 2上使用脚本标记（
）会遇到一些问题

首先：我知道angular 2从模板中删除脚本标记。我克服了这个问题，用index.html编写脚本。但是，在index.html中编写所有脚本会使代码无法读取。我怎样才能解决这个问题

Second：当第一次加载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>
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>


克里斯托弗·沃肯

猎鹿人

他曾出演过100多部电影和电视剧，包括《猎鹿人》、《安妮·霍尔》、《预言三部曲》、《战狗》。。。
社会的
肖恩·潘

神秘河

他曾因在神秘剧《神秘河》（2003）和传记片《牛奶》（2008）中的角色获得两项奥斯卡奖。潘在1974年的一集《草原上的小房子》中短暂亮相，从此开始了他的电视演艺生涯。。。
社会的
angular2官方网站上说“为了安全起见，我们删除了脚本标签”，但是脚本的使用并没有被写入

您可以在
app.component
->启动组件中编写脚本。这会有帮助吗？不看代码很难说。如果它是关于您自己的代码，那么就不要用带有组件或服务的TypeScript编写它。如果是关于加载JS库，请使用require.JS或类似工具来包含代码。我添加了代码。在app.component中编写脚本不起作用。我不知道这是否回答了问题。。。详细说明你想说什么。。。 
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);
        });
    }
}

<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>