Angular 2应用程序中的随机重定向

Angular 2应用程序中的随机重定向,angular,redirect,angular2-routing,Angular,Redirect,Angular2 Routing,我遇到了一个奇怪的情况,everynow和angular应用程序似乎都会进行一些随机重定向 我有一个注释部分,当您添加一个新注释时,它应该将注释添加到注释列表中(代码中没有重定向)。但由于某些原因,当用户第一次登录并创建第一个便笺时(这只发生在第一个便笺上,所有连续的便笺都按预期工作) 重定向还将一些有趣的参数添加到URLhttp://localhost:4200/phils-测试团队/目标?正文=将%2重定向到%2目标&标题=&标题= 此?body=将%2b重定向到%2Bgoals&title

我遇到了一个奇怪的情况,everynow和angular应用程序似乎都会进行一些随机重定向

我有一个注释部分,当您添加一个新注释时,它应该将注释添加到注释列表中(代码中没有重定向)。但由于某些原因,当用户第一次登录并创建第一个便笺时(这只发生在第一个便笺上,所有连续的便笺都按预期工作)

重定向还将一些有趣的参数添加到URL
http://localhost:4200/phils-测试团队/目标?正文=将%2重定向到%2目标&标题=&标题=

?body=将%2b重定向到%2Bgoals&title=&title=
不在代码中

当我检查控制台并启用路由跟踪时,所有看起来都是正确的

我想问题是,在angular中是否有一些特定的东西会影响重定向,或者可能导致重定向,而不在代码中指定它们

新注释.组件

@Component({
  selector: 'new-note',
  templateUrl: './new-note.component.html',
  styleUrls: ['./new-note.component.styl']
})
export class NewNoteComponent implements OnInit, OnChanges {
  @Input() initialValue:any;
  experiment_id: string;
  goal_id: string;
  user_id: string;
  team_id: string;
  form: FormGroup;
  date_created: any;

  isActive = false;

  constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private notesService: NotesService,
    private usersService: UsersService
  ) {}

  ngOnInit() {
    this.isActive = false;
    this.date_created = new Date();

    this.route.parent.data.map((d: any) => d.experiment).subscribe((experiment: any) => {
      this.user_id = experiment.user_id;
      this.team_id = experiment.team_id;
      this.goal_id = experiment.goal_id;
      this.experiment_id = experiment.$key;
    });

    this.form = this.fb.group({
      body: ['',Validators.required],
      date_modified: new Date(),
      customer: [''],
      company: ['']
      // rating: ['',Validators.required]
    });

    console.log(this.form);
  }

  ngOnChanges(changes:SimpleChanges) {
    if (changes['initialValue']) {
      this.form.patchValue(changes['initialValue'].currentValue);

      this.experiment_id = this.team_id;
    }
  }

  isErrorVisible(field:string, error:string) {

    return this.form.controls[field].dirty
      && this.form.controls[field].errors &&
      this.form.controls[field].errors[error];
  }

  reset() {
    this.form.reset();
  }


  get valid() {
    return this.form.valid;
  }

  get value() {
    return this.form.value;
  }

  // Toggle Add Note
  onToggleAddNote() {
    this.isActive = !this.isActive;
    event.preventDefault();
  }

  save(form, onToggleAddNoteInActive) {
    this.notesService.createNewNote(this.team_id, this.user_id, this.goal_id, this.experiment_id, form.value, this.date_created)
      .subscribe(
        () => {
          // alert("note created succesfully. Create another note ?");
          form.reset();
          this.isActive = false;
        },
        err => alert(`error creating note ${err}`)
      );
  }

}
应用程序。路线

export const routerConfig: Route[] = [
  {
    path: 'teams/new',
    component: NewTeamComponent
  },

  {
    path: 'home', redirectTo: '/login'
  },
  {
    path: ':team-name',
    canActivate: [AuthGuard],
    component: AppComponent,
    resolve: {
      team: TeamResolver
    },
    children: [
      {
        path: 'goals',
        children: [
          { path: ':goal_id', component: SingleGoalComponent,
            resolve: {
              goal: GoalResolver
            },
            children: [
              { path: 'experiments/new', component: NewExperimentComponent },
              { path: 'experiments/:experiment_id',
                resolve: {
                  experiment: ExperimentResolver
                },
                children: [
                  { path: 'edit', component: EditExperimentComponent,
                  },
                  { path: '', component: ExperimentDetailsComponent,
                    children: [
                      { path: 'notes', component: ExperimentNotesComponent },
                      { path: '', component: BlankNotesComponent }
                    ]
                  }
                ]
              },
              { path: '', component: ExperimentsComponent }
            ]
          },
          { path: '', component: GoalsComponent }
        ]
      },
      { path: 'notes', component: NotesComponent }
    ]
  },
  { path: '',  redirectTo: '/login',  pathMatch: 'full' },
  { path: '**',  redirectTo: 'home' }
];
更新: 我注意到它实际上是将表单的内容添加到URL中

http://localhost:4800/phils-test-team/goals?body=new%2Bgoal%2Bshould%2Bbe%2Badded%2Bwith%2Bout%2Bany%2Bproblems&title=&title=
更新: new-note.component.html

<div class="add-note" [class.is-active]="isActive">
  <button class="add-note-button" (click)="onToggleAddNote()">
    Add Note
    <md-icon svgSrc="assets/images/plus-circle-outline.svg"></md-icon>
  </button>

  <div class="add-note-content">
    <form [formGroup]="form" autocomplete="off" novalidate class="note-form">

      <fieldset>

        <div class="form-field">
          <textarea name="body" formControlName="body"></textarea>
          <div class="field-error-message"
               *ngIf="isErrorVisible('body', 'required')">
            field is mandatory
          </div>
        </div>

        <div class="btn-toolbar">
          <div class="btn-group actions">
            <button class="btn btn-outline-primary" (click)="onToggleAddNote()">
              Cancel
            </button>
            <button class="btn btn-outline-success" [disabled]="!form.valid" (click)="save(form)">
              Save
            </button>
          </div>

        </div>

      </fieldset>

    </form>
  </div>
</div>

添加注释
字段是必需的
取消
拯救

表单HTML是什么样子的?您是否导入
FormsModule
和/或
ReactiveFormsModule
?我正在使用
ReactiveFormsModule
将表单添加到上述代码中(如果有帮助)。