问题：

角度2:NG2-BS3-模态对我不起作用

华睿识

2023-03-14

Trying to build a simple Angular 2 app with modal dialogs using 'ng2-bs3-modal'

index.html

<!doctype html>
<html>
<head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

  <!-- 2. Configure SystemJS -->
  <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });
    System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

</head>

<!-- 3. Display the application -->

<body>
  <my-app>Loading...</my-app>

</body>

</html>

package.json

{
  "name": "ng2-test",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",    
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install" 
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.17",
    "systemjs": "0.19.27",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json

import {Component} from 'angular2/core'; // <-- importing Component from core
//import {AComponent} from './a.component';

@Component({
    selector: 'my-app', //<----the element defined in the index.html
    template: '<h1>Angular2, Hello {{name}}</h1><br>' // <---this is the template to put in the component.
  //  directives: [AComponent],
})
export class AppComponent { 
    name: string;
    constructor(){
        this.name = "ANIL";
    }
} // <--- we need to export the class AppComponent.

app/a.component.ts

import {Component} from 'angular2/core'; // <-- importing Component from core
//import {AComponent} from './a.component';

@Component({
    selector: 'my-app', //<----the element defined in the index.html
    template: '<h1>Angular2, Hello {{name}}</h1><br>' // <---this is the template to put in the component.
  //  directives: [AComponent],
})
export class AppComponent { 
    name: string;
    constructor(){
        this.name = "ANIL";
    }
} // <--- we need to export the class AppComponent.

app/user-login.component.ts

import {Component} from 'angular2/core';
import {MODAL_DIRECTIVES, ModalComponent} from 'ng2-bs3-modal/ng2-bs3-modal';

@Component({
    selector: 'user-login-modal',
    directives: [MODAL_DIRECTIVES],
    template: `
        <modal #modal [keyboard]="false" [backdrop]="'static'">
            <modal-header [show-close]="false">
                <h4 class="modal-title">I am a modal!</h4>
            </modal-header>
            <modal-body>
                Hello World!
            </modal-body>
            <modal-footer [show-default-buttons]="true"></modal-footer>
        </modal>
    `
})
export class UserLoginModalComponent {

    @ViewChild(ModalComponent)
    modal: ModalComponent;

    open(){
        this.modal.open();
    }

    close(){
        this.modal.close();
    }
}

我看到ng2-bs3-modal模块还在尝试访问@Angular/core，我想应该指向Angular2/core吧？我还尝试在system config js中添加'map'，但它在访问@Angular/core时没有使用'.js'扩展名（尽管在system config js中存在DefaultExtension:'js'）。

Angular2-polyfills.js:127 GET http://localhost:3000/@Angular/core 404（未找到）scheduleTask@Angular2-polyfills.js:127ZoneDelegate.scheduleTask@Angular2-polyfills.js:362zone.ScheduleMacrotask@Angular2-polyfills.js:299（匿名函数）@Angular2-polyfills.js:148send@vm1684:3FetchTextFromurl@system.src.js:1156（匿名函数）@system.src.js:2764（匿名函数）@system.src.js:3338（匿名函数）@system.src.js:3605（匿名函数）@system.src.js:3990（匿名函数）@system.src.js:4453（匿名函数）@system.src.js:4705（匿名函数）@system.src.js:408zonedelegate.调用@angular2-polyfills.js:349zone.运行@angular2-polyfills.js:242（匿名函数）js:282DrainMicroTaskQueue@Angular2-polyfills.jS:500ZoneTask.invoke@Angular2-polyfills.js:452 Angular2-polyfills.js:349错误：错误：XHR错误（404未找到）加载http://localhost:3000/@Angul/core(…)

共有1个答案

桓风史

2023-03-14

我真傻，错过了包括引导CSS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css

并添加ng2-bs3-modal最新版本（它查找@Angulation/包而不是Angulation/

"ng2-bs3-modal": "^0.6.1"

  var map = {
    'app':                        'app', // 'dist',

    '@angular':                   'node_modules/@angular',
    'angular2':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "ng2-bs3-modal": "^0.6.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",

    "canonical-path": "0.0.2",
    "http-server": "^0.9.0"
  },

类似资料：

Ionic 2 HTTP请求不起作用-角度2

你好，我正在尝试做一个简单的Http GET请求，但是无法在ionic v2 Beta中运行... 这是我的应用程序.js：这是我的页面1.js：将http:http添加到构造函数时- 错误：找不到模块“./page1/page1” 我也在Page1.js尝试过：，然后在第 1 页中的（单击）上调用生成生成请求（）.html但它返回这些注释：例外：评估“单击”时出错 this.http未定
Angular2 ng2-bs3-modal不工作与脚本标记加载

我有一个Angular 2应用程序，可以正常工作，我想向它添加modals，所以我执行了安装说明，就像Doug在这里说的那样：https://github.com/dougludlow/ng2-bs3-modal 说明说要么在索引中使用script标记。html页面加载库或使用系统加载器。因为所有其他模块都是通过脚本标签加载的，所以我也为这个模块加载了脚本标签。在我的组件内部，导入在VSCode
角JS动态ng-src在1.2.0-rc.2中不起作用

问题内容：我正在尝试在有角度的JS应用中实现视频元素，并且ng-src不会读取范围变量我正在使用1.2.0-rc.2 如果我使用的是较旧版本的AngularJS库，则可以使用。这是最新版本中的错误，还是故意将其禁用？解决方法是什么？问题答案：经过一些调试后，我发现错误是这样的： http://errors.angularjs.org/1.2.0-rc.2/ $ interpolate /
onBackPressed（）对我不起作用

问题内容：我试图从Android手机上按本机后退按钮时取消CountDownTimer。因此，我想覆盖onBackPressed方法，以取消计时器并返回到另一个活动，但只能执行一次。（返回主活动，如主页按钮）。这是代码的一部分：问题答案： onBackPressed应该在主活动类中还尝试在应用的清单文件中指定父项和子项活动，例如并尝试使用类似的东西并重建您的应用程序如果仍然无法正常运行
Re.sub对我不起作用

问题内容：我试图用例如值替换指定的模式这将返回找到模式的行。例如，这是得到的测试返回值之一这是$$ test $$ 我遇到的问题是当我执行以下操作时没发生什么事。我想念什么？有关更多信息，所以我想做的就是每当遇到“ $$ test $$”时，它将用“替换”替换它。我没有发现“ $$ test $$”的问题，但是由于某种原因没有取代它。问题答案：您正在将back的结果分配给变量，对
FirebaseRecyclerAdapter对我不起作用

我需要父键和它的子键来表示RecycerView中的纬度和经度列表。我想我需要对中的中的做一些事情，但是不管做什么，我都做不对。我目前循环所有的父键和它的子键作为它的许多父键，并将它添加到列表中... JSON结构：纬度和经度POJO。我的活动致命异常：main process：com.example.rasmusjosefsson.rjcar,pid：19134 com.firebase

角度2:NG2-BS3-模态对我不起作用

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档