标签: ng2-bootstrap

我正在使用bootstrap(UI)和angular 2制作项目.我对这两件事情都很陌生我的朋友建议我使用ng2 bootstrap我在ngx bootstrap和ng2 bootstrap之间非常困惑.总是当我搜索2个bootstrap时,它会带我到ngx bootstrap.两者有什么区别？

我正在写一个Angular 2单元测试.我有一个@ViewChild子组件,我需要在组件初始化后识别.在这种情况下,它是Timepickerng2-bootstrap库中的一个组件,但具体情况无关紧要.在我之后detectChanges(),子组件实例仍未定义.

伪代码:

@Component({
    template: `
        <form>
            <timepicker
                #timepickerChild
                [(ngModel)]="myDate">
            </timepicker>
        </form>
    `
})
export class ExampleComponent implements OnInit {
    @ViewChild('timepickerChild') timepickerChild: TimepickerComponent;
    public myDate = new Date();
}


// Spec
describe('Example Test', () => {
    let exampleComponent: ExampleComponent;
    let fixture: ComponentFixture<ExampleComponent>;

    beforeEach(() => {
        TestBed.configureTestingModel({
            // ... whatever needs to be configured
        });
        fixture = TestBed.createComponent(ExampleComponent);
    });

    it('should recognize a timepicker'. async(() => {
        fixture.detectChanges();
        const timepickerChild: Timepicker = fixture.componentInstance.timepickerChild;
        console.log('timepickerChild', timepickerChild)
    })); …

我一直在实现ng2-bootstrap和Angular2.

我无法弄清楚如何打开/关闭移动导航栏.

这是不支持的东西吗？或者我错过了什么？

更新,HTML:

<nav class="navbar navbar-default">
    <div class="container-fluid">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
            <img src="/logo.png" />
        </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li router-active>
                <a [routerLink]=" ['Index'] ">Summary<span class="sr-only">(current)</span></a>
            </li>
            <li router-active>
                <a [routerLink]=" ['Portfolio'] ">Portfolio<span class="sr-only">(current)</span></a>
            </li>
            <li router-active>
                <a [routerLink]=" ['About'] ">About<span class="sr-only">(current)</span></a>
            </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" …

我是angular2的新手,我想知道SpringMVC4的角度为2的可能文件结构是什么？

如图所示,它适用于Angular 1.x,但Angular 2的文件结构完全不同,其组件驱动,我使用的是角度2文件结构,如下所示

我搜索了很多,我发现我们可以分别使用前端(使用angular2)和后端(服务器 - 使用spring/springboot),但我们需要2台服务器来运行应用程序.例如,前端:192.168.100.1:4200和后端:192.168.100.1:8080

那么有没有任何方法或一般文件结构在同一台服务器上运行angular2和spring4MVC(如192.168.100.1:8080)？

提前致谢.答案将不胜感激!

在ng2-smart-table angular 2我想在actions列中添加一个新按钮,点击这个按钮它将路由到另一个页面,这是添加,编辑和删除按钮,但我试图制作这样的新按钮但是它不起作用

settings = {

    add: {
      addButtonContent: '<i  class="ion-ios-plus-outline"></i>',
      createButtonContent: '<i class="ion-checkmark" ></i>',
      cancelButtonContent: '<i class="ion-close"></i>',
      confirmCreate: true,

    },
    edit: {
      editButtonContent: '<i class="ion-edit"></i>',
      saveButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',
          confirmSave: true
    },
    delete: {
      deleteButtonContent: '<i class="ion-trash-a"></i>',
      confirmDelete: true
    }, 

,我怎么能添加按钮,我在ng2智能表文档中搜索,我找不到任何与此相关的内容https://akveo.github.io/ng2-smart-table/documentation

我正在使用valor-software的ng2-bootstrap.当我使用ng serve启动网站时,提供的页面在标题中包含以下样式标记:

<style type="text/css">/* You can add global styles to this file, and also import other style files */
</style>

<style type="text/css">/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}

它显然是从node_modules/bootstrap/dist/css/bootstrap.css文件中提取第二个内联样式.我想覆盖body标签上的背景颜色.我可以更改node-modules文件夹中的bootstrap.css文件,但这不是正确的解决方案.

更改style.css文件不会执行任何操作.即使更改index.html文件似乎也没有做任何事情.样式似乎被覆盖.

非常感激任何的帮助.

谢谢

我一直在尝试这个错误的几个解决方案,但没有找到任何成功的方法来克服这个:没有提供TemplateRef!

错误日志:

EXCEPTION:未捕获(在承诺中):错误:./FooterComponent类中的错误FooterComponent - 内联模板:15:20导致:没有TemplateRef的提供者!错误:./FooterComponent类中的错误FooterComponent - 内联模板:15:20导致:没有TemplateRef的提供程序!

未处理的Promise拒绝:./FooterComponent类中的错误FooterComponent - 内联模板:15:20导致:没有TemplateRef的提供者!; 区域:角; 任务:Promise.then; 值:

footer.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'sa-footer',
  templateUrl: './footer.component.html'
})
export class FooterComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

footer.component.html

<div class="page-footer">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <span class="txt-color-white">myAPP © 2016</span>
        </div>

        <div class="col-xs-6 col-sm-6 text-right hidden-xs">
            <div class="txt-color-white inline-block">
                <i class="txt-color-blueLight hidden-mobile">Last account activity <i class="fa fa-clock-o"></i>
                    <strong>52 mins ago &nbsp;</strong> </i>

                <div class="btn-group dropup" dropdown>
                    <button class="btn btn-xs …

我无法导入ng2-bootstrap

layout.jade

html
 head
title Angular 2 QuickStart
// 1. Load libraries

script(src="/node_modules/angular2/bundles/angular2-polyfills.js")
script(src="/node_modules/systemjs/dist/system.src.js")
//script(src="/node_modules/ng2-bootstrap/ng2-bootstrap.js")
script(src="/node_modules/rxjs/bundles/Rx.js")
script(src="/node_modules/angular2/bundles/angular2.dev.js")

// 2. Configure SystemJS
script.
  System.config({
      packages: {
         app: {
            //format: 'register',
            //defaultExtension: 'js',
            defaultJSExtensions: true
        }
      },
          paths: {
          'ng2-bootstrap/*': 'node_modules/ng2-bootstrap/*.js'
          }
  });
  System.import('app/boot')
  .then(null, console.error.bind(console));
// 3. Display the application
body
    my-app Loading...

表达

 app.use('/node_modules', express.static(__dirname + '/node_modules'));

app.component.ts

 //import "ng2-bootstrap/ng2-bootstrap";

   import {Component} from 'angular2/core';
   import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
   import {firstComponent} from './component/first.component';

   @Component({
     //directives: [Alert],
      directives: [firstComponent,Alert],
      selector: 'my-app',
      template: …

我是棱角分明的新手.

我使用了包ng2-bootstrap使用了bootstrap模式.

我的查看文件是

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Area Master</h4>
        <button type="button" class="close pull-right" (click)="lgModal.hide();" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal Content here...

      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</div>

我需要知道如何从组件(类型脚本文件)中显示/隐藏此模式.

输入脚本文件是

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms';
import { Area …

我通过以下方式在运行Angular 2.0.1的项目上安装了ng2-bootstrap:

npm install ng2-bootstrap --save

我设置了这样的项目:

    //systemjs.config.js
    (function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            'moment': 'node_modules/moment/moment.js',
            'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
            // our app is within the app folder
            app: 'app',
            // angular bundles

和:

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap'; …