小编KB_*_*KB_的帖子

我有一个订阅可观察不触发的问题.

我有一个使用侧面导航布局指令的布局,如下所示:

<md-sidenav-layout class="nav-bar">


    <md-sidenav #start>
        <nav>
            <a [routerLink]="['/home']">Home</a>
        </nav> 
        <button md-button (click)="start.close()">Close</button>
    </md-sidenav>

    <router-outlet></router-outlet>

</md-sidenav-layout>

我需要做的是从路由器插座显示的组件打开侧面导航.

一个这样的组件可能如下所示:

@Component({

    providers: [SidenavService, MdIconRegistry],
    directives: [MdIcon],
    templateUrl: `<md-icon (click)="toggleSidenav()">menu</md-icon>`,
    styleUrls: ["./home.component.scss"]
})

export class Home {

    myColor: string;

    constructor(private sidenavService: SidenavService) {
        this.myColor = "primary";

        this.sidenavService.getSidenavObs().subscribe(state => {console.log("state change")});
    }


    toggleSidenav() {

        this.sidenavService.toggleSidenav("open");
    }

}

我创建了一个返回如下observable的服务:

@Injectable()
export class SidenavService {

    private toggle = new Subject<string>();
    private toggleObs = this.toggle.asObservable();

    getSidenavObs() {
        return this.toggleObs;
    }

    toggleSidenav(state: string) {
        this.toggle.next(state);
    }

}

最后是父类的代码(属于侧面导航布局HTML): …

我在Angular 2 Dart中使用Router和RouteParams.

我的路线如下:

@RouteConfig(const [
  const Route(path: '/', component: ViewLanding, as: 'home'),
  const Route(path: '/landing', component: ViewLanding, as: 'landing'),
  const Route(path: '/flights', component: ViewFlights, as: 'flights'),
  const Route(path: '/picker/:cityDepart/:cityArrival/:dateDepart/:dateArrival/', component: ViewFlights, as: 'picker'),
  const Route(path: '/order/:id/:level/:dateDepart/:dateArrival/', component: ViewOrder, as: 'order'),
  const Route(path: '/order/complete', component: ViewComplete, as: 'orderComplete')
])

//应用程序入口点:

void main() {
  print('-- Main.dart 2 --');
  bootstrap(Tickets, [
    routerInjectables,
    client_classes,
    // The base path of your application
    bind(APP_BASE_HREF).toValue('/'),
    // uncomment this if you want to use '#' in your …

这是一个有趣的问题,我有点无视,直到现在.似乎Angular2在指令标记内呈现内容.但是,对于路由器插座,它恰好就像一个兄弟姐妹.

我的第一个问题是:为什么？只是出于兴趣.

我不会太担心,但它现在实际上导致我的应用程序出现问题.我有两个嵌套的出口,由于一些莫名其妙的原因,孩子一个在页面上占据15px的高度,并不重要我做什么,我无法摆脱它.(见截图)

我所描述的确是如此,或者我只是做错了什么？此外,我不知道在这一点上如何处理这个,搜索到了所有,没有找到任何东西.

谢谢你的帮助.

这里更新是我的文件:

@import "../../node_modules/bootstrap-less/bootstrap/bootstrap";
@import "../../node_modules/font-awesome/less/font-awesome";
@icon-font-path: "./bootstrap/fonts/";
@fa-font-path: "./font-awesome/fonts";
@import "rrm.less";

html, body {
  height: 100% !important;
}
body {
  padding-top: 80px;
}
.load-container {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  .loaing {
    position: fixed;
    left: 50%;
    top: 35%;
    z-index: 1000;
    height: 31px;
    width: 31px;
  }
}
.top-navbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #FFFFFF;
  height: 80px;
  &.floating {
    .box-shadow(0 1px 3px rgba(0,0,0,.25));
  }
  .navbar-brand {
    height: …

我是这些技术的新手,请原谅我,如果我的一些问题没有意义!

我必须为我的公司开发Web应用程序和移动应用程序.我正在考虑Ionic 2,因为它使用Angular 2,我想在我使用angular 2构建的web-app和使用Ionic 2的移动应用程序之间共享代码,因为它们几乎可以做同样的事情.

我该怎么办？我想保持应用程序的逻辑相同,我只想修改一些关于UI的东西.谢谢!

演示http://plnkr.co/edit/7uoVecfa62i8No8GtQHI?p=preview

当我使用*ngIf隐藏包含嵌套组件的第一部分时,会触发每个嵌套组件的ngOnDestroy.

<div *ngIf="!ff2">
    <my-component
    ></my-component>
    <my-component
    ></my-component>
    <my-component
    ></my-component>
    <my-component
    ></my-component>
    <my-component
    ></my-component>
  </div>

控制台输出为:

    init
    init
    init
    init
    init
    destroy
    destroy
    destroy
    destroy
    destroy

但是当我隐藏第二部分,其中子组件被*ngFor复制时,并不是每个ngOnDestroy都被触发.

 <div *ngIf="!ff">
        <my-component
          *ngFor="#i of [1,2,3,4,5,6]"
        ></my-component>
      </div>

控制台输出为:

(6) init
(3) destroy

你知道我做错了什么,或者angular2有问题吗？谢谢.

目前,我仍然围绕着整个Angular 2概念.我过去使用过AngularJS(1),我喜欢它.

所以目前我正在开始一个新项目并想到为什么不开始使用Angular 2.现在我知道每个人都在使用Typescript而不是javascript.但是,我仍然不确定如何在一个简单的Web托管服务器(PHP,HTML,MySQL,Javascript等)上运行项目.

我知道我可以在我的Linux服务器上运行npm start,但是如何将它放在托管服务器上呢？我不能将Typescript编译为javascript,这样我就可以在浏览器中使用它而无需运行npm吗？我读了一些关于JSPM和其他几个的东西,但我不确定这是否是我需要的,也不知道如何使用JSPM或类似的东西(例如使用JSBPM的"5分钟以下快速启动").

我知道Angular 2有一个javascript部分,这对我有用.但是没有编码示例,您在互联网上找到的所有内容都是Typescript.因此我无法继续在javascript中运行Angular 2,因为缺少教程.

简而言之,我不介意使用Typescript,但我只想要一个纯粹的javascript作为结果,我可以导入HTML并从那里开始.

另外在旁注问题上,运行生产时是否需要存在所有node_modules？

教程的奖励积分可以解释这一点!

谢谢!

我有以下标记:

<select [ngModel]="selectedCategory" 
     (ngModelChange)="selectCategory($event && $event != 'null' ? $event : null)">

  <option [value]="null">(all categories)</option>
  <option *ngFor="let cat of categories" [ngValue]="cat">{{cat.name}}</option>

</select>

在TypeScript中:

export class MyComp {
    public categories: Category[];
    public selectedCategory: Category;
    public selectCategory(cat: Category) {
        this.selectedCategory = cat;
        doStuff();
    }
}

它看起来不像是正确的方法.是否有任何其他不那么冗长的方法来获取值为null(而不是'null')的默认选项？我不能将默认选项放在categories数组中,因为它会搞乱其他代码.我不介意ngModelChange因为我需要在选择时运行自定义代码.这只是$event && $event != 'null' ? $event: null我想清理的部分.

我无法使用[ngValue]默认选项; 它只给了我一个值0: null(字符串).并且跳过设置值导致绑定selectedCategory=null不匹配默认选项,而在init处取消选择组合框.

我试图在Angular2的upgradeAdapter的帮助下升级Angular1应用程序.该应用程序使用upgradeAdapter进行自举,并按预期工作,至少只要我不尝试升级A1的集成服务之一.

假设我用打字稿写了这个A1服务:

//A1.ts
// inject decorator that in short does target.$inject = ...injects
@Inject('$rootScope')
class TestService{
    constructor($rootScope: angular.IRootScopeService){
        //$rootScope.whatever();
    }
} 
// register the service in application module
globalModule.service('TestService', TestService);

我可以在任何需要的地方以正常的A1方式注入TestService,并且它可以工作.

现在为A2升级我做:

//upgradeAdapter.ts
import {UpgradeAdapter} from 'angular2/upgrade';
const upgradeAdapter = new UpgradeAdapter();
export default upgradeAdapter;

//A2.ts
import upgradeAdapter from './upgradeAdapter'
import { Injectable, Inject} from 'angular2/core'

@Injectable()
export class A2TestService{
    constructor(@Inject('$rootScope') _rootScope: angular.IRootScope){
        //_rootScope.whatever()
    }
}

upgradeAdapter.upgradeNG1Provider('$rootScope');
// tried with additional upgradeAdapter.upgradeNG1Provider('$rootScopeProvider');
upgradeAdapter.addProvider(A2TestService);
// make this service available in A1 …

我在primeNG官方网站上搜索过,我发现emptyMessage= "No Record Found"在PrimeNG ref中没有像数据表这样的属性.http://www.primefaces.org/primeng/#/datatable

所以当我的数据表中没有数据时,它没有向我显示任何消息.

<p-dataTable  #datatable [value]="jobData" [rows]="20" [paginator]="true"
            [responsive]="true" selectionMode="single"><--emptyMessage="" not working here as attribute :(
    <p-column expander="true" styleClass="icon"></p-column>
            <p-column field="finOrVin" styleClass="vinfin" header="header" sortable="custom" (sortFunction)="sort($event)">
            <p-column field="state"  styleClass="status" header="Status"  sortable="custom" (sortFunction)="sort($event)">
            </p-column>
    </p-dataTable>

我希望 ngFof 中单击的元素显示 ngIf 隐藏的信息。现在单击图像，所有隐藏元素都会显示。如何显示单击图片的信息？

我在示例中没有使用 jquery，因为我无法让它工作。在接受其他解决方案之前，我希望了解如何在 Angular2 中做到这一点。 笨蛋

 @Component({

  selector: 'hello-world',
  template: 'src/hello_world.html',
  directives: [FORM_DIRECTIVES, CORE_DIRECTIVES]

})
export class HelloWorld {

    clicked() {// only show clicked img info 
      e=event.target;
      console.log(e);
      this.show=!this.show;
  };

  info = [{
    data: "information for img1:",
    data2: "only the info img1 is displayed"
  },
    {
      data: "information for img2:",
      data2: "only the info for img2 is displayed"
    },
    {
      data: "information for img3:",
      data2: "only the  info for img3 is displayed"
    }]
}

<div  *ngFor="#x …