Question

我编写了<html> <head> <title>Form</title> <meta charset="utf-8"> <script type="text/javascript"> <!-- function validateform(){ var age=document.myform.age.value; var sex=document.myform.sex.value; if (last == ""){ alert("Last name can't be blank."); return false;} if (age.value < 30){ return true; }else if (age.value < 18){ alert("You are not old enough to fill out the form.") return false;} if (sex == 'M' || sex == 'm' || sex == 'F' || sex == 'f'){ return true; }else if (sex == ""){ alert("Please enter a valid gender"); return false } </script> <body> <form action="" method="post" name="aform"><table> <form method="post"> <tr> <td>Enter first name</td><td><input type="text" name="first" /></td></tr> <tr><td>Enter last name</td><td><input type="text" name="last" id="last" />*</td></tr> <tr><td>Enter your age</td><td><input type="text" name="age" id="age" size=5 />*</td></tr> <tr><td>Enter your sex</td><td><input type="text" name="sex" id="sex" size=2 />*</td></tr> <tr><td>Enter your favorite color</td><td><input type="text" name="color" /></td></tr> <tr><td><input type="button" value="Submit" onclick="verify();" /></td></tr> </table> </form> </body> </html>来获取角度应用程序引导之前的配置详细信息。

以下代码写在ConfigService中，此代码工作正常，我可以在应用加载之前加载配置。

app.module.ts

但是，现在我想将有效负载传递给我的配置API，我必须从查询参数中读取。

我尝试了以下但是它会抛出

...
providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: configServiceFactory,
        deps: [ConfigService],
        multi: true
    }
]
...

如何阅读APP_INITIALIZER服务中的查询参数？

Answer 1

export class BootstrapService {
  private getParameterByName(name) {
    const url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
  }

  public load(): Promise<void> {
    const token = this.getParameterByName('token');
    // todo something with token
    return Promise.resolve();
  }
}

Answer 2

如果您想使用Angular方式，我会说使用解析器。了解更多here

Answer 3

FWIW， window对象上已经提供了您需要的所有方法。

我最近不得不检查URL上是否传递了foo的查询参数。这是我最终要做的事情：

export class ConfigService {
    constructor(/* your dependencies */) {
        // remember that your dependencies must be manually added
        // to your deps: [] property, ALL OF THEM (direct and indirect)
    }

    initialize() {
        // remember that constructors should not contain business logic
        // instead, call this during the APP_INITIALIZER part

        const url = new URL(window.location.href);
        const foo = url.searchParams.get('foo');

        // your business logic based on foo
    }
}

URL似乎是fairly well supported。

如何在angular4中读取APP_INITIALIZER服务中的查询参数？

3 个答案: