小编squ*_*hel的帖子

我想在Angular 2中使用模板驱动的表单,我需要在我的指令中访问当前的ngForm,作为local属性,我不想将它们作为参数传递.

我的表单看起来像这样:

<form #frm="ngForm" (ngSubmit)="save(frm)">
    <input [(ngModel)]="user.name" #name="ngForm" type="text">
    <a (click)="showFrm()" class="btn btn-default">Show Frm</a>
</form>

在我的组件中

@Component({
    selector: 'addUser',
    templateUrl: `Templates/AddUser`,
})

export class AddUserComponent implements CanDeactivate {
    public user: User;
    // how can I use this without defining the whole form 
    // in my component I only want to use ngModel
    public frm : ngForm | ControlGroup;

    public showFrm()  : void{
        //logs undefined on the console
        console.log(this.frm);
    }
}

这是可能的,因为我需要检查myFrm是否是valide或是否触及了我无法将当前表单作为参数传递的函数,例如"routerCanDeactivate",我不想过多地使用模型驱动的表单写代码,我喜欢旧学校的ng1模型绑定.

我已经更新了我的示例,并且组件中不知道frm.

我已经创建了一个简单的Hello World应用程序.但是,当我想添加一个"服务"只是一个简单的Di我得到以下错误:

angular2.dev.js:23877 EXCEPTION:无法解析'AppComponent'(？)的所有参数.确保所有参数都使用Inject进行修饰或具有有效的类型注释,并且"AppComponent"使用Injectable进行修饰.

angular2-polyfills.js:469未处理的Promise拒绝:无法解析'AppComponent'(？)的所有参数.确保所有参数都使用Inject进行修饰或具有有效的类型注释,并且"AppComponent"使用Injectable进行修饰.; 区域:角; 任务:Promise.then; 值:

我有3个档案

boot.ts:

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './mainApp'
bootstrap(AppComponent);

mainApp.ts:

import {Component} from 'angular2/core';
import {CourseService} from './course.service';


@Component({
    selector: 'my-app',
    template: 'My First Angular 2 App',
    providers: [CourseService],
})
export class AppComponent {
    constructor(courseService: CourseService) {
    }
} 

course.service.ts:

export class CourseService {
   public getCourses(): string[] {
      let courses: string[] = ["Course 1", "Course 2", "Course 3"];
      return courses;
  }
}

当我从构造函数中删除参数时,每件事都可以正常工作.

这就是我的HTML文档的头部,我使用angular 2 beta 13:

<script …

嗨我想在Bootstrap 4中禁用导航栏折叠.如果导航栏占据整个宽度但在导航栏内容器类只允许默认宽度放置内容,那将会很好.

我在bootstrap 4中尝试过这个禁用响应式导航栏,但这不适用于其中的容器.

但那不起作用.

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row">
  <div class="container">
    <a href="/" class="navbar-brand">PIM</a>
    <ul class="nav navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link pr-3" href="">Login</a></li>
      <li class="nav-item"><a class="nav-link" href="">Sign up</a></li>
    </ul>
  </div>
</nav>

看起来像:

但是应该没有换行符.

如果登录将保持对齐并且注册将在导航栏中右对齐,那也很好.

我用TypeScript写了一个AngularJs指令将modelValues复制到剪贴板,指令的"旧"$ scope版本到目前为止工作正常:

module App.Directives {
interface ICopyToClipboardScope extends ng.IScope {
    sqValues: ng.INgModelController;
    copyToClipbaord(): void;
}

/*
 * Usage: <div sq-copy-to-clipboard ng-model="viewModel.Name"></div>
 */
export class CopyToClipboard implements ng.IDirective {
    public restrict: string = "A";
    public replcae: boolean = true;
    public require = "ngModel";
    public template: string = '<a ng-click="sqCopyPateCtrl.copyToClipboard()" class="btn btn-default" title="In der Zwischenablage ablegen"><i class="fa fa-fw fa-copy"></i></a>';

    public scope = {
        sqValues: "=ngModel"
    }

    public controller = ($scope: ICopyToClipboardScope) => {
        var inputId: string = "sqCopyToClipboardText";
        var input = $(`<input …

我真的不明白我应该在角度单位测试中使用$ rootScope = $ rootScope.$ new().你在许多单元测试例子中看到了这个断言.但在以下示例中不起作用:

angular.module("app.root", []).factory("rootFct", function ($rootScope) {
    $rootScope.amount = 12;
    return {
        getAmount: function () {
           return ($rootScope.amount + 1);
        }
    }
});

关联的单元测试不起作用:

describe('Amount Tests', function() {
    var rootFct, $rootScope;

    beforeEach(function() {
        angular.mock.module("app.root");
        angular.mock.inject(function (_rootFct_, _$rootScope_) {
            $rootScope = _$rootScope_.$new();
            rootFct = _rootFct_;
        });
    });

    it('Set Amount in rootScope on 10', function() {
        var result = rootFct.getAmount();
        expect(result).toBe(13);
        $rootScope.amount = 15;
        result = rootFct.getAmount();
        expect(result).toBe(16);
    });
});

它只适用于我改变它的时候

$rootScope = _$rootScope_.$new();

至

$rootScope = …

我为我的应用程序创建了一个最小的webpack示例,我尝试使用带有"./file.name.html"的templateUrl进行编译.但我的应用程序显示的唯一内容是我的索引页面上的templateUrl"./ file.name.html"的名称.这些应用程序似乎有效,因为控制台和控制台都没有错误

<app>... Loading </app> 

不再显示了.在我尝试使用webpack之前,我使用过systemJs,而我的应用程序运行得非常好.所以我不认为这是一个应用程序问题.

我的起始文件名是boot.ts

/// <reference path="../typings/index.d.ts" />
import 'core-js/es6';
import 'core-js/es7/reflect';
import "zone.js/dist/zone";

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.component定义看起来像

.... Imports

@Component({
    selector: 'sxp-app',
    templateUrl: "./app.component.html"
})
export class AppComponent { ... } 

我的webpack.config.js

var path = require('path');

module.exports = {
    entry: "./App/boot.ts",
    output: {
        path: path.join(__dirname, './Scripts/dist'),
        filename: "bundle.js"
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        loaders: [
             {
                 test: /\.ts$/, …