小编Sha*_*vek的帖子

我想在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.

有时我看到很少有脚本通过"sh"命令执行,有时通过"./"命令执行.我无法理解它们之间的确切区别.请帮助我.

如果我有多个级别的角度组件，我如何使用@Output事件从子级到祖父级发出动作？

祖父母：

<parent (handleClick)="grandmaHandleClick($event)">
<parent>
...
grandmaHandleClick(event) {
  console.log('grandma knows you clicked')
}

家长：

<child (handleClick)="handleClick($event)">
</child>

孩子：

<div (click)="onClick()">Click button
</div>
...
@Output() handleClick = new EventEmitter
onClick() {
  this.handleClick.emit('clicked a button')
}

我试图拥有它，以便@Output 可以深入钻取一些组件，实现此目的的最佳方法是什么，您能否提供示例？

我正在阅读angularJS的基础知识,了解它是如何手动自举的.我遇到了不同的方法,发现这种方法最合适.

angular.element(document).ready(function(){
   angular.bootstrap(document,['myapp'])
})

更进一步,我遇到了另一种将其打破基础的方式.我根据我的理解对代码进行了评论,但有人可以向我解释有关如何在幕后工作的更多细节.

window.onload = function (){

  var $rootElement = angular.element(window.document);
  var modules = [
    'ng',       // angular module
    'myApp',    // custom module
    // what are we trying to achieve here?
    function($provide){ 
        $provide.value('$rootElement',$rootElement)
    }
  ];

  var $injector = angular.injector(modules);      // one injector per application
  var $compile = $injector.get('$compile');       // Compile Service: it traverses the DOM and look for directives and  compile and return linking function. No accecess to scope
  var compositeLinkFn = $compile($rootElement);   // …

我有一个自定义组件，当我将布尔属性设置为 false 时，该组件应该隐藏内容。除该属性外，所有其他属性都会得到反映。我一定做错了什么。

static get properties(){
      title: {
        type: String,
        attribute: 'title',
      },

      titleEnable: {
        type: Boolean,
        attribute: 'title-enable',
      },
}

constructor() {
    super();
    this.titleEnable=true;
    this.title="default";
}

render(){

    return html`                
        ${this.titleEnable 
        ? html`
        <p class="title" ?hidden="${!this.titleEnable}">${this.title}</p>
        `
        : html ``} 
    ` 
}

如果我像<my-component></my-component>在 HTML 文件中一样使用该组件，它会显示：按预期默认。

如果我像这样使用它：<my-component title="New Title"></my-component>它会显示：按预期新标题。

但如果我尝试隐藏它，<my-component title-enable="false"></my-component>布尔值就不会改变。我已经尝试过 !title-enable、title-enable='false"、.titleEnable=false 以及您能想象到的所有变体。最让我生气的是，每当我在构造函数中设置 'this.titleEnable=false' 和我碰巧只是在标签上声明了没有值的变量，并将其视为 TRUE，出现“默认值”。<my-component title-enable></my-component>我完全迷失了。

当我们谈论 Angular 2 中的变更检测机制时，每个人都建议使用NgZone或ChangeDetectorRef。

是否有任何工作示例application.tick()/ApplicationRef.tick()也做同样的事情ChangeDetectorRef/ NgZone。

第二个问题：API 说，在 DEV MODE 中，ApplicationRef.tick()多次运行更改检测。

有没有办法只运行一次。因为在我使用此方法的那一刻，我收到一条错误消息

ApplicationRef.tick() 被递归调用

我使用 tick() 遇到的问题的类似示例在此 Github 链接中

我已经完成了手动触发更改检测问题。

任何信息在这表示赞赏。谢谢。

我使用官方指南和其他帖子创建了一个Angular库(例如来自@Todd Palmer的https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5).

该库非常简单,它只包含一个组件component.ts及其测试component.spec.ts.

与图书馆一起,我还有一个示例应用程序,在那里我展示了如何使用component.ts.示例应用程序app.component.ts由其自己的测试表示app.component.spec.ts.

我的工作区的脚手架是由Angular CLI(v 6.0.8)创建的.工作区的结构,至少对于我怀疑与我的案例更相关的文件,如下所示

workspace
 - projects
   - library-name
     - src
       - lib
         - component.ts
         - component.spec.ts
       - test.ts
     - karma.config.ts
 - src
   - app
     - app.component.ts
     - app.component.spec.ts
   - karma.config.ts
 - angular.json

如果我ng test library-name只运行测试component.spec.ts运行.

如果我在ng test没有指定库名的情况下运行,因为我想测试组件和示例应用程序,会发生以下情况:

• 一个浏览器由业力自动打开
• app.component.spec.ts运行测试,结果显示在刚刚打开的浏览器上
• 如果我用ctrl + C停止进程,则新进程启动并执行测试component.spec.ts(即第一个测试进程的中断启动第二个测试进程)
• 如果我再次使用ctrl + C停止测试,那么最终一切都会停止,我将返回命令行

我的问题是,如果有一种方式来运行的两个测试app.component.spec.ts和component.spec.ts在同一进程中.

场景:我想创建一个调度程序应用程序,它应该按照定义的计划运行shell脚本.为了简单起见,我希望用户在我的应用程序将使用的一些外部文件(properties/xml)中添加脚本名称和执行时间.目前,我计划在Linux服务器上运行此应用程序作为后台进程.将来我们可能会将其作为网络应用程序.

我到现在为止做了什么:

1. 我遇到xmlschedulingdataprocessorplugin了这个目的,但它要求用户将作业编写为Java代码,然后将其添加到XML文件中.
2. 我找到了一些目前无效的调度示例.

请建议一些有用的石英API,它可以帮助我实现这个目的.

更新:

public class CronTriggerExample {
public static void main(String[] args) throws Exception {

  String[] a = {"script1.sh:0/10 * * * * ?", "script2.sh:0/35 * * * * ?"};

    for (String config : a) {

        String[] attr = config.split(":");
        System.out.println("Iterating for : "+attr[0]);

        JobKey jobKey = new JobKey(attr[0], attr[0]);

        Trigger trigger = TriggerBuilder
                .newTrigger()
                .withIdentity(attr[0], attr[0])
                .withSchedule(CronScheduleBuilder.cronSchedule(attr[1]))
                .build();

        Scheduler scheduler = new StdSchedulerFactory().getScheduler();

        scheduler.getContext().put("val", config);
        JobDetail job …

我有以下代码，其中包含多个订阅。我需要实现的是这样的：

1. 订阅 activateRoute 以获取用户和产品数据。
2. 返回商品数据后，使用商品数据订阅getSeller服务。
3. 使用返回的卖家数据订阅 getRating 服务。

我的问题：有没有更好的方法来执行这些嵌套订阅？这样做是一个好习惯吗？

this.activatedRoute.data.pipe(
 map((data) => {
    this.user = data['user'];
    this.product = data['product'];

    return this.product;
  })
).subscribe(result => {

  if (this.product === null) {
    this.router.navigate(['/home']);
  } else {
    this.displayCurrency = this.dataService.getCurrencySymbolById(this.product.currency);

    this.userService.getUser(this.product.createdBy).subscribe(seller => {
      this.seller = seller;

      this.ratingService.getRatingByUserId(seller.id).subscribe(rating => {
        this.rating = rating;
      })

    });
  }
});

我正在尝试使用 jasmine 为 getCurrentNavigation().extras.state 编写单元测试。

为了解决这个问题，我试图监视这个路由器方法。

我的组件文件，

@Component({
  selector: 'app-location-list',
  templateUrl: './location-list.component.html',
  styleUrls: ['./location-list.component.scss']
})
export class LocationListComponent implements OnInit{

  locationId;
  locationName;
  constructor(private activatedRoute: ActivatedRoute, private router: Router) {
    if (this.router.getCurrentNavigation().extras.state) {
      this.locationId = this.router.getCurrentNavigation().extras.state.locationId;
    }
    if (this.router.getCurrentNavigation().extras.state) {
      this.locationName = this.router.getCurrentNavigation().extras.state.locationName;
    }
  }
  ngOnInit() { }
}

我的规格文件，

describe('LocationListComponent ', () => {
  let component: LocationListComponent ;
  let fixture: ComponentFixture<LocationListComponent >;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        LocationListComponent 
      ],
      providers: []
    })
      .compileComponents();
  }));

  beforeEach(() …