TypeScript - קידוד URL של Angular Router ותווי מיוחדים והתנהגות הדפדפן

אני פשוט לא מצליח למצוא את הפתרון לבעיה כזו. אני מעצב מנוע חיפוש והייתי רוצה להציג ב-URL מה שהמשתמש מנסה למצוא כזה:

https://my-site.com/search;query=%28rockstar;search=true;page=0

המשתמש מנסה למצוא את הביטוי (rockstar.

כשהדבקתי את ה-URL הזה בדפדפן זה עובד כמצופה אבל דפדפן כרום מציג את ה-URL הזה כך:

https://my-site.com/search;query=(rockstar;search=true;page=0

אז ה-%28 משתנה ל-(. אני לא יודע אם התנהגות זו תלויה ב-Angular או בדפדפן. כאשר יש לי URL עם ( ואז רענון F5 לא עובד כי Angular Router מדווח על בעיה כזו:

Cannot match any routes. URL Segment: 'rockstar;search=true;page=0'

העתקת קישור משורת הכתובת של ה-URL גם היא מיותרת בגלל ההתנהגות הזו הקישור שהועתק מכיל את התו ( (ולא %28). איך למנוע מ-%28 ותווים מיוחדים אחרים לא להיות מפוענחים על ידי הדפדפן בשורת כתובת ה-URL? הבעיה מתעוררת ב-Angular v5.2.5

הנה הדמו עם הבעיה הזו: https://angular-url-problem.stackblitz.io

שימו לב שב-Angular 6 הבעיה לא קיימת: https://angular-url-problem-v6.stackblitz.io

תשובה #1

זה לא עובד כי אתה לא מסתכל על הפרמטרים הנכונים. ב-Stackblitz הזה, כמו שאתה יכול לראות, אתה אפילו לא צריך לקודד את הפרמטרים שלך.

אתה גם לא צריך ללכת יותר מדי רחוק כדי ליצור פרמטרי שאילתה. אנגולר מספקת רמת הפשטה גבוהה, השתמש בזה לטובתך.

ngOnInit(): void {
  this._route.queryParamMap
    .subscribe(params => {
      this.form.patchValue({
        query: params.get('query') || '',
      });
    });
}

public onSubmit(): void {
  const query: string = this.form.value.query;
  this._router.navigate(['/search'], {
    queryParams: {
      query
    }
  })
}

ערוך עם סימון מטריצה : stackblitz

ngOnInit(): void {
  this._route.params
    .subscribe(params => {
      this.form.patchValue({
        query: params['query'] || '',
      });
    });
}

public onSubmit(): void {
  const query: string = this.form.value.query;
  this._router.navigate(['/search', { query }]);
}