Question

在角色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>

Answer 1

angular2官方网站说“我们删除脚本标签以确保安全”，但不编写使用脚本

Angular2删除脚本标记

1 个答案: