无法从新窗口获取隐藏值(角度/ javascript)

时间:2019-02-08 18:47:23

标签: javascript angular typescript

我在组件中构建了一个表单

html

 <button type="button" (click)="myForm(i)">

打字稿

  myForm(i) {
   let form = document.createElement('form');
   form.setAttribute('action', this.urlAddr);
   form.setAttribute('id', 'test');
   form.setAttribute('target', this.name);
   let method = this.name === 'query' ? 'GET' : 'POST';
   form.setAttribute('method', method);
   let hiddenField = document.createElement('input');
    hiddenField.setAttribute('type', 'hidden');
    hiddenField.setAttribute('name', 'type');
    hiddenField.setAttribute('value', '1');
    form.appendChild(hiddenField);
    let hiddenFieldTwo = document.createElement('input');
    hiddenFieldTwo.setAttribute('type', 'hidden');
    hiddenFieldTwo.setAttribute('name', 'sas');
    hiddenFieldTwo.setAttribute('value', 'cnt');
    form.appendChild(hiddenFieldTwo);
   let token = document.createElement('input');
   token.setAttribute('id', 'token');
   token.setAttribute('type', 'hidden');
   token.setAttribute('name', 'secureToken');
   token.setAttribute('value', this.securityToken);
   form.appendChild(token);
   document.cookie = 'Flag=Y';
   document.body.appendChild(form);
   form.submit();
}

现在在第二个窗口打字稿上,我尝试检索“令牌”字段,但它一直说值未定义。

新窗口的打字稿

  ngOnInit() {
    console.log('test'); //this prints but non below prints in new window
    let inputElement: HTMLInputElement = document.getElementById('token') as HTMLInputElement;
    let inputTwoElement: HTMLInputElement = document.getElementsByName('secureToken')[0] as HTMLInputElement;
    if (inputElement) { 
      const token: string = inputElement.value;
      console.log('target token =' + token);
    }
    if (inputTwoElement) {
      const token: string = inputTwoElement.value;
      console.log('target tokenTwo =' + token);
    }
}

我对为什么我无法获得任何价值感到困惑。该请求是一个“ GET”请求,并且该值应能够从父窗口加载。我在做错什么或错过什么?

1 个答案:

答案 0 :(得分:0)

如果所有代码都在同一模块中,请尝试使用ViewChild和ElementRef来访问元素,如下例所示:

build/sbt -Dsbt.log.noformat=true "inspect tree compile" > t.txt

但是,如果您发布的两个代码都位于不同的元素中,则它们将无法访问彼此的DOM。他们每个人在构建之前都有自己的文档,构建之后,所有这些都将保存在“单页html”中。

请注意,如果您的目标是在组件之间共享数据,那么最正式的正确方法就是使用服务,这就是Angulars的核心优势之一。

但是,您可以通过多种方式来实现自己的目标,我建议阅读:Cursor